*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "Public Sans";
    background-color: #f5f5f5;
}

@import url('common-css/color.css');
@import url('common-css/font.css');
@import url('common-css/button.css');

/* ** --------------------------------------------------------------------- Top Banner Section------------------------------------------------------------ ** */
.top-banner-section{
    position: relative;
    width: 100%;
    background: var(--Gray-900, #191C1F);
}

.top-banner .black-div{
display: inline-flex;
transform: rotate(-3deg);
padding: 6px 10px;
align-items: center;
gap: 10px;
background: var(--Warning-300, #F3DE6D);
}

.top-banner .friday{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; 
}

.top-banner .up-to{
    color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; 
}

.top-banner .percent{
    color: var(--Warning-500, #EBC80C);
    font-family: "Public Sans";
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px; 
}

.top-banner .off{
    color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px; 
}

.top-banner .shop-now-btn{
    display: inline-flex;
    padding: 0px 10px;
    justify-content: center;
    align-items: center;
    gap: 8px;

    border-radius: 2px;
background: var(--Warning-500, #EBC80C);
}

.top-banner .shop-now-btn a{
    color: var(--Gray-900, #191C1F);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 38px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}    

.top-banner .icon svg{
width: 20px;
height: 20px;
}

.top-banner-section .top-banner-close-btn{position: absolute;top: 20px;right: 20px;z-index: 1;display: inline-flex;width: 25px;height: 25px;align-items: flex-start;gap: 10px;/* padding: 8px; */border-radius: 2px;background: var(--Gray-800, #303639);cursor: pointer;}

.top-banner-section .top-banner-close-btn svg{
    width: 16px;
    height: 16px;
}

/*************************************************************************************************************************************************************/

/* ** --------------------------------------------------------------------- Sub Header Section------------------------------------------------------------ ** */
.sub-header-section{
padding: 12px 0px;
background: var(--Secondary-700, #1B6392);
box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.16) inset;
}

.language{
    position: relative;
}

.sub-header .language .dropdown-text{
    color: var(--Gray-00, #FFF);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

.language .title, .menu ul li a{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
cursor: pointer;
}

.language  .menu ul li a{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    cursor: pointer;
}

.language .menu{
    position: absolute;
    top: 30px;
    left: -48px;
    display: inline-flex;
    gap: 10px;
    padding: 10px 20px;
    background: var(--Gray-900, #ffffff);
    border-radius: 5px;
    z-index: 100;
    align-items: start;
}

.language .menu ul li{
    list-style: none;
}



.currency{
    position: relative;
}

.sub-header .currency .dropdown-text{
    color: var(--Gray-00, #FFF);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

.currency .title, .menu ul li a{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
cursor: pointer;
}

.currency  .menu ul li a{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    cursor: pointer;
}

.currency .menu{
    position: absolute;
    top: 30px;
    left: 2px;
    display: inline-flex;
    gap: 10px;
    padding: 10px 20px;
    background: var(--Gray-900, #ffffff);
    border-radius: 5px;
    z-index: 100;
    align-items: start;
}

.currency .menu ul li{
    list-style: none;
}



.sub-header .title{
color: #FFF;
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.sub-header .follow-us{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    /* line-height: 20px;  */
}

.sub-header .social svg{
    width: 16px;
    height: 16px;
}

/*************************************************************************************************************************************************************/

/**-------------------------------------------------------------------Header Section------------------------------------------------------------------------**/

.header-section{
    /* position: relative; */
    padding: 15px 0px;
    background: var(--Secondary-700, #1B6392);
}

.header{
    position: relative;
}

.user-shopping-cart{
position:absolute;
top: 108%;
right: 9%;
z-index: 10000;
display: inline-flex;
/* padding-bottom: 24px; */
/* padding: 28px; */
width: 375px;
padding: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
}

.user-shopping-cart .title{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}

.user-shopping-cart .count{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.user-shopping-cart .horizontal-line{
    display: flex;
    /* padding: 16px 24px; */
    width: 375px;
    height: 2px;
    align-items: flex-start;
    /* gap: 10px; */
    background: var(--Gray-00, #FFF);
    box-shadow: 0px -1px 0px 0px #E4E7E9 inset;
}

.user-shopping-cart .cart-product{
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
border-radius: 3px;
background: var(--Gray-00, #FFF);
} 

.user-shopping-cart .cart-product img{
width: 80px;
height: 80px;
border: 1px solid var(--Gray-100, #E4E7E9);
}

.user-shopping-cart .cart-product .name{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.user-shopping-cart .cart-product .qty{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.user-shopping-cart .cart-product .price{
    color: var(--Secondary-500, #2DA5F3);

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
}

.user-shopping-cart .sub-total{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-shopping-cart .sub-total .text{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.user-shopping-cart .sub-total .price{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.user-shopping-cart .checkout-btn{
    display: flex;
width: 328px;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
}

.user-shopping-cart .checkout-btn .text{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.user-shopping-cart .checkout-btn svg{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.user-shopping-cart .view-cart{
display: flex;
width: 328px;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
border: 2px solid var(--Primary-100, #FFE7D6);
}

.user-shopping-cart .view-cart .text{
    color: var(--Primary-500, #FA8232);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.header .user-login{
    position:absolute;
    top: 108%;
    right: 0;
    z-index: 10000;

display: inline-flex;
padding: 32px;
flex-direction: column;
align-items: flex-start;
gap: 24px;

border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);

/* Dropdown Shadow */
box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
}

.header .user-login .sign-in-text{
    color: var(--Gray-900, #191C1F);
    text-align: center;
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.header .user-login label{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.header .user-login .forgot-password{
color: var(--Secondary-500, #2DA5F3);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; 
}

.header .user-login .form-control.input{
width: 360px;
height: 44px;
align-self: stretch;
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.header .user-login .password{
    position: relative;
}

.header .user-login .password-view{
    position: absolute;
    bottom: 0;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;

}

.header .user-login .password-view svg{
width: 20px;
height: 20px;
}

.header .user-login .login-btn{
border: none;
outline: none;
display: flex;
width: 360px;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
}

.header .user-login .login-btn .text{
    color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.header .user-login .login-btn svg{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-bottom: 3px;
}

.header .user-login .dont-account{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 15px;
}

.header .user-login .line{
width: 105px;
height: 1px;
background: #E4E7E9;
}

.header .user-login .dont-account .text{
color: var(--Gray-500, #77878F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.header .user-login .create-account-text{
    display: flex;
width: 360px;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
border: 2px solid var(--Primary-100, #FFE7D6);
margin-top: 10px;
}

.header .user-login .create-account-text span{
color: var(--Primary-500, #FA8232);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; 
letter-spacing: 0.168px;
text-transform: uppercase;
}

.header .site-logo .icon svg{
width: 40px;
height: 40px;
fill: var(--Gray-00, #FFF);
} 

.header .site-logo span{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: 40px;
letter-spacing: -0.64px;
}

.header .global-search{
display: flex;
/* padding: 14px 20px; */
width: 100%;
height: 40px;
align-items: flex-start;
gap: 8px;
border-radius: 2px;
background: var(--Gray-00, #FFF);
box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
}

.header .global-search .search-box{
    width: 90%;
    height: 100%;
}

.header .global-search .search-box input{
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0px 10px;
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.header .global-search .search-icon svg{
width: 20px;
height: 20px;
}

.header .cart{
    position: relative;
}

.header .cart,.wishlist,.user svg{
width: 32px;
height: 32px;
}

.header .cart .cart-dot{
    position: absolute;
    bottom: -5px;
    left: 10px;
}

.header .cart .cart-dot svg{
width: 4px;
height: 4px;
flex-shrink: 0;
fill: var(--Gray-00, #FFF);
}

.header .cart-count{
position: absolute;
top: -5px;
right: -5px;
width: 20px;
height: 20px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 50%;
border: 1.5px solid var(--Secondary-700, #1B6392);
background: #FFF;
}

.header .cart-count span{
color: var(--Secondary-700, #1B6392);
text-align: center;
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 16px;
}

/*************************************************************************************************************************************************************/

/**-------------------------------------------------------------------Navigation Section-------------------------------------------------------------------**/
.navigation{
    /* display: flex; */
/* width: 1920px; */
/* padding: 16px 300px; */
/* justify-content: space-between; */
/* align-items: center; */
    background: var(--Gray-00, #FFF);
    box-shadow: 0px -1px 0px 0px #E4E7E9 inset;
}

.navigation  .site-logo .icon svg{
    width: 30px;
    height: 30px;
    fill: #1B6392;
} 
    
.navigation .site-logo span,.navbar-brand{
    color: #1B6392;
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    /* line-height: 0px; */
    letter-spacing: -0.64px;
}

.navigation .all-categories{
position: relative;
display: flex;
width: 130px;
height: 42px;
justify-content: center;
align-items: center;
border-radius: 2px;
background: var(--Gray-50, #F2F4F5);
cursor: pointer;
}

.navigation .all-categories-menu{
    position: absolute;
    top: 50px;
    left: 0;
    /* max-width: 240px; */
    width: 240px;
    /* width: 100%; */
    border-radius: 6px;
    background: var(--Gray-00, #FFF);
    box-shadow: 0px -1px 0px 0px #E4E7E9 inset;
}

.nav-active{

    border-radius: 6px;
    background: var(--Gray-50, #F2F4F5);
    
}

.navigation .all-categories-menu .nav-item:hover{

border-radius: 6px;
background: var(--Gray-50, #F2F4F5);

}    

.navigation .all-categories-menu .nav-item:hover .nav-link,svg{

    color: black;
    
}  

.navigation .all-categories-menu .nav-link,svg{
    color: var(--Gray-700, #475156);

/* Body/Large/400 */
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 133.333% */
}

.navigation .all-categories span{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.navigation .all-categories i{
    font-size: 15px;
}

.navigation .track-order a,.compare a,.customer-support a,.need-help a{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.navigation .track-order svg,.compare svg,.customer-support svg,.need-help svg{
    width: 20px;
    height: 20px;
}

.navigation .all-categories-menu-item{
    position: absolute;
    top: 0;
    left: 250px;
    /* max-width: 760px; */
    width: 760px;
    /* width: 100%; */
}

.navigation .all-categories-menu-item .sub-item .nav-item:hover{
    border-radius: 6px;
    background: var(--Gray-50, #F2F4F5);
}

.navigation .featured-phones .pro-title{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
}

.navigation .featured-phones .pro-price{
    color: #1B6392;
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; 
}

.navigation .discount{
    width: 100%;
    height: 100%;
    background-color: var(--Warning-500, #efe197);
    border-radius: 5px;
    padding: 3px;
}

.navigation .discount img{
    width: 100px;
    height: 100px;
}

.navigation .discount h5{

}

.navigation .discount p,span{
color: var(--Gray-900, #45525f);
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.navigation .discount span{
    color: var(--Gray-900, #45525f);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.navigation .discount .price{
    background: white;
    padding: 10px;
    line-height: 20px;
    border-radius: 5px;
    font-weight: bold;
}

.navigation .discount .shop-now{
display: inline-flex;
padding: 0px 40px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
color: var(--Gray-00, #FFF);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 45px; 
letter-spacing: 0.168px;
text-transform: uppercase;
}

.navigation .contact a{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

.navigation .contact svg{
    width: 23px;
    height: 23px;
}

/**------------------------------------------------------Slider and Banner Section---------------------------------------------------------**/
.slider-banner-section{
    width: 100%;
    height: 100%;
    background: #FFF;
}

.main-slider{
    position: relative;
    height: 100%;
}

.main-slider .swiper {
    position: relative;
    width: 100%;
    height: 100%;
}

.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom,20px);
    top: var(--swiper-pagination-top,auto);
    left: -322px;
    width: 100%
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: black;
}

.main-slider .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: #fff; */
    border-radius: 6px;
    background: var(--Gray-50, #F2F4F5);
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.main-slider .short-title{
color: var(--Secondary-600, #2484C2);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.main-slider .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 56px;
}

.main-slider .describe{
color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

.main-slider .shop-now-btn{
display: flex;
width: 150px;
/* padding: 0px 10px; */
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 3px;
background: var(--Primary-500, #FA8232);

color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 45px;
letter-spacing: 0.192px;
text-transform: uppercase;
}

.main-slider .shop-now-btn svg{
width: 24px;
height: 24px;
color: var(--Gray-00, #FFF);
}

.main-slider .slider-image{
width: 350px;
height: 400px;
flex-shrink: 0;
}

.main-slider .slider-image img{
width: 100%;
height: 100%;
/* width: 368px; */
/* height: 408px; */
flex-shrink: 0;
object-fit: cover;
}

.main-slider .slider-right{
    position: relative;

}

.main-slider .slider-right .slider-image-price{
    position: absolute;
    top: 0;
    right: 15px;
display: inline-flex;
/* padding: 0px 21px 0px 23px; */
width: 100px;
height: 100px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
border: 4px solid var(--Gray-00, #FFF);
background: var(--Secondary-500, #2DA5F3);
}

.main-slider .slider-right .slider-image-price span{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 100px;
}

.main-banner .first-banner{
/* width: 424px; */
width: 100%;
height: 230px;
border-radius: 6px;
background: var(--Gray-900, #191C1F);
}

.main-banner .first-banner .card-body{
    position: relative;
    overflow: hidden;
}

.main-banner .first-banner .summar-sale{
color: var(--Warning-500, #EBC80C);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; 
text-transform: uppercase;
}

.main-banner .first-banner .pro-name{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 32px;
}

.main-banner .first-banner .shop-now-btn{
    display: flex;
    /* padding: 0px 15px; */
    width: 146px;
    height: 45px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.168px;
text-transform: uppercase;
}
    
.main-banner .first-banner .shop-now-btn svg{
    width: 20px;
    height: 20px;
    color: var(--Gray-00, #FFF);
}

.main-banner .first-banner .right-side{
    position: relative;
}

.right-image {
    width: 200px;
    height: 200px;
    position: absolute;
    right: -38px;
    bottom: -55px;
}

.first-banner .right-side .off{
position: absolute;
top: 24%;
right: 8%;
z-index: 100;
display: flex;
width: 102px;
height: 40px;
padding: 8px 16px;
align-items: flex-start;
gap: 10px;
flex-shrink: 0;
border-radius: 2px;
background: var(--Warning-400, #EFD33D);
}

.first-banner .right-side .off span{
color: #141414;
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; 
}

.main-banner .second-banner{
    /* width: 424px; */
    display: flex;
/* padding: 40px 40px 40px 32px; */
justify-content: center;
align-items: center;
gap: 20px;
    width: 100%;
    height: 230px;
    border-radius: 6px;
    background: var(--Gray-50, #F2F4F5);
}

.main-banner .second-banner .left-image{
width: 160px;
height: 160px;
}

.main-banner .second-banner .left-image img{
    width: 160px;
    height: 160px;
}

.main-banner .second-banner .pro-name{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 32px;
}

.main-banner .second-banner .pro-price{
    color: var(--Secondary-500, #2DA5F3);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.main-banner .second-banner .shop-now-btn{
    display: flex;
    /* padding: 0px 15px; */
    width: 146px;
    height: 45px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.168px;
text-transform: uppercase;
}
    
.main-banner .second-banner .shop-now-btn svg{
    width: 20px;
    height: 20px;
    color: var(--Gray-00, #FFF);
}
/*********************************************************************************************************************************************/

/**-------------------------------------------------------About Service Section CSS---------------------------------------------------------**/

.about-service-section{
    width: 100%;
    height: 100%;
    background: #FFF;
}

.about-service-section .about-service{
border-radius: 6px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
border-radius: 6px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
padding: 25px;
}

.about-service-section .about-service .svg-icon{
    width: 40px;
    height: 40px;
}

.about-service-section .about-service .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
}

.about-service-section .about-service .short-detail{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.about-service-section .about-service .vertical-line{
    width: 1px;
    height: 56px;
    background: #E4E7E9;
}

/********************************************************************************************************************************************/


/**-----------------------------------------------------Best Deals Section-----------------------------------------------------------------**/

.hot-deals-section{
    width: 100%;
    height: 100%;
    background: #FFF;
}

.hot-deals .section-title{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 32px; 
}

.hot-deals .deals-ends-in{
    color: #000;

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.hot-deals .offer-remaining-time{
display: flex;
padding: 6px 12px;
align-items: center;
gap: 6px;
border-radius: 2px;
background: var(--Warning-300, #F3DE6D);
}

.hot-deals .offer-remaining-time span{
    color: var(--Gray-900, #191C1F);

/* Body/Medium/400 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}

.hot-deals .section-all-product-view-url a{
    color: var(--Secondary-500, #2DA5F3);

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
}

.hot-deals .section-all-product-view-url svg{
    color: var(--Secondary-500, #2DA5F3);
    width: 20px;
    height: 20px;
}

.hot-deals .hot-deals-offer-card{
/* position: relative; */
width: 100%;
height: 592px;
flex-shrink: 0;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.hot-deals-offer-card .card-body{
    padding: 15px;
}

.hot-deals-offer-card .off{
position: absolute;
top: 10px;
left: 10px;
display: inline-flex;
padding: 5px 10px;
align-items: flex-start;
gap: 10px;
border-radius: 2px;
background: var(--Warning-400, #EFD33D);
}

.hot-deals-offer-card .off span{
    color: var(--Gray-900, #191C1F);

    /* Body/Tiny/600 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
}

.hot-deals-offer-card .hot-tag{
    position: absolute;
top: 45px;
left: 10px;
    display: inline-flex;
    padding: 5px 10px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
background: var(--Danger-500, #EE5858);
}

.hot-deals-offer-card .hot-tag span{
    color: var(--Gray-00, #FFF);

/* Body/Tiny/600 */
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 133.333% */
}

.hot-deals-offer-card img{
width: 280px;
height: 268px;
flex-shrink: 0;
}

.hot-deals-offer-card .rating{
    padding: 5px 0px;
}

.hot-deals-offer-card .rating .icon svg{
    width: 20px;
    height: 20px;
}

.hot-deals-offer-card .rating .count{
color: var(--Gray-500, #77878F);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.hot-deals-offer-card .product-name{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
padding: 5px 0px;
}

.hot-deals-offer-card .price .actual-price{
    color: var(--Gray-300, #ADB7BC);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
text-decoration-line: strikethrough;
}

.hot-deals-offer-card .price .current-price{
    color: var(--Secondary-500, #2DA5F3);

    /* Body/Large/600 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 133.333% */
}

.hot-deals-offer-card .product-short-detail{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
padding: 5px 0px;
}

.hot-deals-offer-card .wishlist,.preview{
display: flex;
/* padding: 12px; */
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 3px;
background: var(--Primary-100, #FFE7D6);
}

.hot-deals-offer-card .wishlist svg{
width: 24px;
height: 24px;
}

.hot-deals-offer-card .preview svg{
    width: 24px;
    height: 24px;
}

.hot-deals-offer-card .add-to-card-btn{
display: flex;
padding: 11.5px 9px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
}

.hot-deals-offer-card .add-to-card-btn svg{
width: 20px;
height: 20px;
}

.hot-deals-offer-card .add-to-card-btn .add-card-title{
    color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
/* line-height: 20px;  */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.hot-deals .hot-deals-card{
position: relative; 
overflow: hidden;
/* width: 248px; */
width: 100%;
height: 296px;
flex-shrink: 0;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.hot-deals-card .image-container {
    position: relative;
}

.hot-deals-card .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hot-deals-card:hover .image-overlay {
    opacity: 1;
}

.hot-deals-card:hover .wishlist-cart-preview {
    display: flex !important;
}

.hot-deals-card .sold-out-tag{
position: absolute;
top: 10px;
left: 10px;
display: inline-flex;
padding: 5px 10px;
align-items: flex-start;
gap: 10px;
border-radius: 2px;
background: var(--Gray-400, #929FA5);
}

.hot-deals-card .sold-out-tag span{
    color: var(--Gray-00, #FFF);

    /* Body/Tiny/600 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
}

.hot-deals-card .off{
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    padding: 5px 10px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
    background: var(--Warning-400, #EFD33D);
}

.hot-deals-card .off span{
    color: var(--Gray-900, #191C1F);

    /* Body/Tiny/600 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 133.333% */
}

.hot-deals-card .hot-tag{
position: absolute;
top: 10px;
left: 10px;
display: inline-flex;
padding: 5px 10px;
align-items: flex-start;
gap: 10px;
border-radius: 2px;
background: var(--Danger-500, #EE5858);
}

.hot-deals-card .hot-tag span{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; 
}

.hot-deals-card .wishlist-cart-preview{
    position: absolute;
    top: 35%;
    left: 10%;
    display: none;
}

.hot-deals-card .wishlist-cart-preview .wishlist-div-icon{
display: flex;
/* padding: 12px; */
width: 45px !important;
height: 45px !important;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
/* background: var(--Gray-00, #62a7c2); */
background: var(--Gray-00, #FFF);
margin: 0 5px;
}

.hot-deals-card .wishlist-cart-preview .cart-icon{
    display: flex;
    /* padding: 12px; */
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    /* background: var(--Gray-00, #62a7c2); */
    background: var(--Gray-00, #FFF);
    margin: 0 5px;
}

.hot-deals-card .wishlist-cart-preview .preview-icon{
        display: flex;
        /* padding: 12px; */
        width: 45px;
        height: 45px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 100px;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 5px;
}

.hot-deals-card .wishlist-cart-preview .wishlist-div-icon svg{
width: 24px;
height: 24px;
color: black;
}

.hot-deals-card .wishlist-cart-preview .cart-icon svg{
    width: 24px;
    height: 24px;
    color: black;
}

.hot-deals-card .wishlist-cart-preview .preview-icon svg{
        width: 24px;
        height: 24px;
        color: black;
}

.hot-deals-card .wishlist-cart-preview .wishlist-div-icon:hover {
    background: var(--Primary-500, #FA8232);
}

.hot-deals-card .wishlist-cart-preview .cart-icon:hover {
    background: var(--Primary-500, #FA8232);
}

.hot-deals-card .wishlist-cart-preview .preview-icon:hover {
    background: var(--Primary-500, #FA8232);
}

.hot-deals-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
    color: white;
}

.hot-deals-card .wishlist-cart-preview .cart-icon:hover svg{
    color: white;
}

.hot-deals-card .wishlist-cart-preview .preview-icon:hover svg{
    color: white;
}

.hot-deals-card img{
    /* width: 216px; */
width: 100%;
height: 188px;
flex-shrink: 0;
}

.hot-deals-card .product-name{
    color: var(--Gray-900, #191C1F);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

.hot-deals-card .actual-price{
    color: var(--Gray-400, #929FA5);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
text-decoration-line: strikethrough;
padding-top: 5px;
}

.hot-deals-card .product-price{
    color: var(--Secondary-500, #2DA5F3);

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
padding-top: 5px;
}

/***************************************************************Best Deals Section End*******************************************************/

/**-------------------------------------------------------------Shop With Category Section------------------------------------------------**/

.shop-with-category-section{
    position: relative;
    width: 100%;
    height: 100%;
    background: #FFF;
}

.shop-with-category {
    position: relative;
    height: 100%;
}

.custom-category-swiper-button-next{
    position: absolute;
    top: 40%;
    right: -2%;
    z-index: 100;
    display: inline-flex;
    height: 45px;
    padding: 10px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 100px;
background: var(--Primary-500, #FA8232);
}

.custom-category-swiper-button-prev{
    position: absolute;
    top: 40%;
    left: -2%;
    z-index: 100;
    display: inline-flex;
    height: 45px;
    padding: 10px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 100px;
background: var(--Primary-500, #FA8232);
}

.custom-category-swiper-button-next svg{
    width: 24px;
    height: 24px;
}

.custom-category-swiper-button-prev svg{
    width: 24px;
    height: 24px;
}

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

.shop-with-category .card{
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.shop-with-category .card img{
width: 148px;
height: 148px;
}

.shop-with-category .card .category-title{
color: var(--Gray-900, #191C1F);
text-align: center;
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}

/*************************************************************Shop With Category Section End************************************************/

/*************************************************************Featured Product Section*****************************************************/
.featured-product-section{
    width: 100%;
    height: 100%;
    background: #FFF;
}

.featured-product-discount-banner{
width: 100%;
height: 710px;
flex-shrink: 0;
border-radius: 3px;
background: var(--Warning-300, #F3DE6D);
}

.featured-product-discount-banner .category-name{
    color: var(--Danger-600, #BE4646);
text-align: center;

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
}

.featured-product-discount-banner .discount-percentage{
    color: var(--Gray-900, #191C1F);
text-align: center;

/* Heading/01 */
font-family: "Public Sans";
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 40px; /* 125% */
}

.featured-product-discount-banner .short-title{
    color: var(--Gray-700, #475156);
text-align: center;

/* Body/Medium/400 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}

.featured-product-discount-banner .offer-ends-in{
    color: var(--Gray-900, #191C1F);

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

.featured-product-discount-banner .ends-of-christmas{
display: flex;
padding: 6px 10px;
align-items: flex-start;
gap: 10px;
border-radius: 2px;
background: var(--Gray-00, #FFF);

color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.featured-product-discount-banner .shop-now-btn{
display: inline-flex;
padding: 0px 25px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 3px;
background: var(--Primary-500, #FA8232);

color: var(--Gray-00, #FFF);

/* Heading/06 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 50px; /* 350% */
letter-spacing: 0.192px;
text-transform: uppercase;
}

.featured-product-discount-banner img{
width: 100%;
/* height: 428px; */
height: 438px;
flex-shrink: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

.featured-product .filtering .nav-link.active{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 20px;

display: flex;
padding: 8px;
align-items: center;
gap: 10px;
/* border-bottom: 2px solid #FA8232; */
background: var(--Gray-00, #FFF);
box-shadow: 0px -2px 0px 0px #FA8232 inset;
} 

.featured-product .filtering .nav-link{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.featured-product .filtering .view-all-btn .browse-all{
color: var(--Primary-500, #FA8232);
font-family: "Public Sans";
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.featured-product .filtering .view-all-btn svg{
    width: 18px;
    height: 18px;
}


.featured-product .featured-product-card{
    position: relative; 
    overflow: hidden;
    /* width: 248px; */
    width: 100%;
    height: 320px;
    border-radius: 3px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
}

.featured-product-card .card .card-body{
    margin: 0;
    padding: 0;
    padding: 15px;
}

.featured-product-card .image-container {
        position: relative;
}
    
.featured-product-card .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
        opacity: 0;
        transition: opacity 0.3s ease;
}
    
.featured-product-card:hover .image-overlay {
        opacity: 1;
}
    
    .featured-product-card:hover .wishlist-cart-preview {
        display: flex !important;
    }
    
    .featured-product-card .sold-out-tag{
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    padding: 5px 10px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
    background: var(--Gray-400, #929FA5);
    }
    
    .featured-product-card .sold-out-tag span{
        color: var(--Gray-00, #FFF);
    
        /* Body/Tiny/600 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; /* 133.333% */
    }
    
    .featured-product-card .off{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
        background: var(--Warning-400, #EFD33D);
    }
    
    .featured-product-card .off span{
        color: var(--Gray-900, #191C1F);
    
        /* Body/Tiny/600 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; /* 133.333% */
    }
    
    .featured-product-card .hot-tag{
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    padding: 5px 10px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
    background: var(--Danger-500, #EE5858);
    }
    
    .featured-product-card .hot-tag span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; 
    }

    .featured-product-card .best-deals-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
        background: var(--Secondary-500, #2DA5F3);
    }
        
    .featured-product-card .best-deals-tag span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px;
    }

    .featured-product-card .sale{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
        background: var(--Success-500, #2DB224);
    }
        
    .featured-product-card .sale span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; 
    }
    
    .featured-product-card .wishlist-cart-preview{
        position: absolute;
        top: 27%;
        left: 11%;
        display: none;
    }
    
    .featured-product-card .wishlist-cart-preview .wishlist-div-icon{
    display: flex;
    /* padding: 12px; */
    width: 40px !important;
    height: 40px !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 50%;
    /* background: var(--Gray-00, #62a7c2); */
    background: var(--Gray-00, #FFF);
    margin: 0 5px;
    }
    
    .featured-product-card .wishlist-cart-preview .cart-icon{
        display: flex;
        /* padding: 12px; */
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 50%;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 5px;
    }
    
    .featured-product-card .wishlist-cart-preview .preview-icon{
            display: flex;
            /* padding: 12px; */
            width: 40px;
            height: 40px;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 100%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 5px;
    }
    
    .featured-product-card .wishlist-cart-preview .wishlist-div-icon svg{
    width: 20px;
    height: 20px;
    color: black;
    }
    
    .featured-product-card .wishlist-cart-preview .cart-icon svg{
        width: 20px;
        height: 20px;
        color: black;
    }
    
    .featured-product-card .wishlist-cart-preview .preview-icon svg{
            width: 20px;
            height: 20px;
            color: black;
    }
    
    .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover {
        background: var(--Primary-500, #FA8232);
    }
    
    .featured-product-card .wishlist-cart-preview .cart-icon:hover {
        background: var(--Primary-500, #FA8232);
    }
    
    .featured-product-card .wishlist-cart-preview .preview-icon:hover {
        background: var(--Primary-500, #FA8232);
    }
    
    .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
        color: white;
    }
    
    .featured-product-card .wishlist-cart-preview .cart-icon:hover svg{
        color: white;
    }
    
    .featured-product-card .wishlist-cart-preview .preview-icon:hover svg{
        color: white;
    }
    
    .featured-product-card img{
        /* width: 216px; */
    width: 100%;
    height: 172px;
    flex-shrink: 0;
    }
    
    .featured-product-card .product-name{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .featured-product-card .actual-price{
        color: var(--Gray-400, #929FA5);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    text-decoration-line: strikethrough;
    padding-top: 5px;
    }
    
    .featured-product-card .product-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        padding-top: 5px;
    }

    .featured-product-card .rating{
        padding: 5px 0px;
    }
    
    .featured-product-card .rating .icon svg{
        width: 16px;
        height: 16px;
    }
    
    .featured-product-card .rating .count{
        color: var(--Gray-500, #77878F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }
/*********************************************************************************************************************************************/

/**-------------------------------------------------------Second Banner Section------------------------------------------------------------**/

.second-banner-section{
    width: 100%;
    height: 100%;
    background: #FFF;
}

.second-banner-section .first-banner-card{
    display: flex;
    padding: 44px;
    justify-content: center;
    align-items: center;
    gap: 40px;
    border-radius: 4px;
    background: var(--Gray-50, #F2F4F5);
}

.second-banner-section .first-banner-card .introduction{
display: inline-flex;
padding: 6px 12px;
align-items: flex-start;
gap: 10px;
border-radius: 2px;
background: var(--Secondary-500, #2DA5F3);
}

.second-banner-section .first-banner-card .introduction span{
    color: var(--Gray-00, #FFF);

    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    text-transform: uppercase;
}

.second-banner-section .first-banner-card .title{
    color: var(--Gray-900, #191C1F);

/* Heading/01 */
font-family: "Public Sans";
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 36px; /* 125% */
}

.second-banner-section .first-banner-card .describe{
    color: var(--Gray-700, #475156);

    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 150% */
}

.second-banner-section .first-banner-card .shop-now-btn{
    display: inline-flex;
    padding: 0px 18px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    margin-top: 15px;
}

.second-banner-section .first-banner-card .shop-now-btn span{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.second-banner-section .first-banner-card .shop-now-btn svg{
    width: 20px;
    height: 20px;
}

/****/


.second-banner-section .second-banner-card{
    position: relative;
    overflow: hidden;
    width: 100%;
    /* height: 336px;  */
    display: flex;
    padding: 26px;
    justify-content: center;
    align-items: center;
    gap: 30px;
    border-radius: 4px;
    background: var(--Gray-900, #191C1F);
}

.second-banner-section .second-banner-card .introduction{
display: inline-flex;
padding: 6px 10px;
align-items: flex-start;
gap: 10px;
border-radius: 2px;
background: var(--Warning-400, #EFD33D);
}

.second-banner-section .second-banner-card .introduction span{
    color: var(--Gray-900, #191C1F);

    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    text-transform: uppercase;
}

.second-banner-section .second-banner-card .title{
    color: var(--Gray-00, #FFF);

    /* Heading/01 */
    font-family: "Public Sans";
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px; /* 125% */
}

.second-banner-section .second-banner-card .describe{
    color: var(--Gray-300, #ADB7BC);

    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 150% */
}

.second-banner-section .second-banner-card .shop-now-btn{
    display: inline-flex;
    padding: 0px 18px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    margin-top: 15px;
}

.second-banner-section .second-banner-card .shop-now-btn span{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.second-banner-section .second-banner-card .shop-now-btn svg{
    width: 20px;
    height: 20px;
}

.second-banner-section .second-banner-card .second-banner-card-img{
    position: absolute;
    top: 35px;
    right: 20px;
    z-index: 100;
    /* width: 312px; */
    width: 270px;
    height: 349px;
}

.second-banner-section .second-banner-card img{
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

/*********************************************************************************************************************************************/

/**--------------------------------------------------------Computer Accessories Section-----------------------------------------------------**/
.computer-accessories-section{
    width: 100%;
    height: 100%;
    background: #FFF;
}

.computer-accessories .first-discount-banner{
    display: flex;
    padding: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px;
    border-radius: 4px;
    background: var(--Warning-200, #F7E99E);
}
    
.computer-accessories .first-discount-banner .product-name{
    color: var(--Gray-900, #191C1F);
    text-align: center;
    
    /* Heading/02 */
    font-family: "Public Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 114.286% */
}
    
.computer-accessories .first-discount-banner .short-title{
    color: var(--Gray-700, #475156);
    text-align: center;
    
    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
    
.computer-accessories .first-discount-banner .offer-ends-in{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}
    
.computer-accessories .first-discount-banner .ends-of-christmas{
    display: flex;
    padding: 4px 8px;
    align-items: flex-start;
    gap: 8px;
    border-radius: 3px;
    background: var(--Gray-00, #FFF);
    
    color: var(--Gray-900, #191C1F);
    text-align: center;
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 150% */
}
    
.computer-accessories .first-discount-banner .shop-now-btn{
    display: flex;
    width: 200px;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}
    
.computer-accessories .first-discount-banner img{
    width: 128px;
    height: 128px;
    object-fit: cover;
}

.second-discount-banner{
display: flex;
padding: 40px 24px;
flex-direction: column;
justify-content: center;
align-items: center;
/* gap: 24px; */
border-radius: 4px;
background: #124261;
}

.second-discount-banner .summer-sales{
display: flex;
padding: 6px 12px;
align-items: flex-start;
gap: 8px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.12);
}

.second-discount-banner .summer-sales span{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 18px; 
}

.second-discount-banner .discount-percentage{
color: #FFF;
text-align: center;
/* Heading/02 */
font-family: "Public Sans";
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 114.286% */
}

.second-discount-banner .short-describe{
color: #FFF;
text-align: center;
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

.second-discount-banner .product-name{
    color: var(--Warning-500, #EBC80C);

/* Body/Large/600 */
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}

.second-discount-banner .shop-now-btn{
display: flex;
width: 200px;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Secondary-500, #2DA5F3);
}

.second-discount-banner .shop-now-btn span{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; 
letter-spacing: 0.168px;
text-transform: uppercase;
}

.computer-accessories .heading{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
}

.computer-accessories .nav-link{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.computer-accessories .nav-link.active{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;

    display: flex;
    padding: 8px;
    align-items: flex-start;
    gap: 10px;
    background: var(--Gray-00, #FFF);
    box-shadow: 0px -2px 0px 0px #FA8232 inset;
}

.computer-accessories .view-all-btn .browse-all{
    color: var(--Primary-500, #FA8232);

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
}

.computer-accessories .view-all-btn svg{
    width: 20px;
    height: 20px;
}


    .computer-accessories-product .product-filtering .nav-link.active{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 10px;
    /* border-bottom: 2px solid #FA8232; */
    background: var(--Gray-00, #FFF);
    box-shadow: 0px -2px 0px 0px #FA8232 inset;
    } 
    
    .computer-accessories-product .product-filtering .nav-link{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .computer-accessories-product .product-filtering .view-all-btn .browse-all{
    color: var(--Primary-500, #FA8232);
    font-family: "Public Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    }
    
    .computer-accessories-product .product-filtering .view-all-btn svg{
        width: 18px;
        height: 18px;
    }
    
    
    .computer-accessories-product .computer-accessories-product-card{
        position: relative; 
        overflow: hidden;
        /* width: 248px; */
        width: 100%;
        height: 320px;
        border-radius: 3px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
    }
    
    .computer-accessories-product-card .card .card-body{
        margin: 0;
        padding: 0;
        padding: 15px;
    }
    
    .computer-accessories-product-card .image-container {
            position: relative;
    }
        
    .computer-accessories-product-card .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
            opacity: 0;
            transition: opacity 0.3s ease;
    }
        
    .computer-accessories-product-card:hover .image-overlay {
            opacity: 1;
    }
        
        .computer-accessories-product-card:hover .wishlist-cart-preview {
            display: flex !important;
        }
        
        .computer-accessories-product-card .sold-out-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
        background: var(--Gray-400, #929FA5);
        }
        
        .computer-accessories-product-card .sold-out-tag span{
            color: var(--Gray-00, #FFF);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; /* 133.333% */
        }
        
        .computer-accessories-product-card .off{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 5px 10px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 2px;
            background: var(--Warning-400, #EFD33D);
        }
        
        .computer-accessories-product-card .off span{
            color: var(--Gray-900, #191C1F);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; /* 133.333% */
        }
        
        .computer-accessories-product-card .hot-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
        background: var(--Danger-500, #EE5858);
        }
        
        .computer-accessories-product-card .hot-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
    
        .computer-accessories-product-card .best-deals-tag{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 5px 10px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 2px;
            background: var(--Secondary-500, #2DA5F3);
        }
            
        .computer-accessories-product-card .best-deals-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
        }
    
        .computer-accessories-product-card .sale{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 5px 10px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 2px;
            background: var(--Success-500, #2DB224);
        }
            
        .computer-accessories-product-card .sale span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
        
        .computer-accessories-product-card .wishlist-cart-preview{
            position: absolute;
            top: 27%;
            left: 11%;
            display: none;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon{
        display: flex;
        /* padding: 12px; */
        width: 40px !important;
        height: 40px !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 50%;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 5px;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon{
            display: flex;
            /* padding: 12px; */
            width: 40px;
            height: 40px;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 50%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 5px;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon{
                display: flex;
                /* padding: 12px; */
                width: 40px;
                height: 40px;
                align-items: center;
                justify-content: center;
                gap: 8px;
                border-radius: 100%;
                /* background: var(--Gray-00, #62a7c2); */
                background: var(--Gray-00, #FFF);
                margin: 0 5px;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon svg{
        width: 20px;
        height: 20px;
        color: black;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon svg{
            width: 20px;
            height: 20px;
            color: black;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon svg{
                width: 20px;
                height: 20px;
                color: black;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
            color: white;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon:hover svg{
            color: white;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon:hover svg{
            color: white;
        }
        
        .computer-accessories-product-card img{
            /* width: 216px; */
        width: 100%;
        height: 172px;
        flex-shrink: 0;
        }
        
        .computer-accessories-product-card .product-name{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }
        
        .computer-accessories-product-card .actual-price{
            color: var(--Gray-400, #929FA5);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
        text-decoration-line: strikethrough;
        padding-top: 5px;
        }
        
        .computer-accessories-product-card .product-price{
            color: var(--Secondary-500, #2DA5F3);
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
            padding-top: 5px;
        }
    
        .computer-accessories-product-card .rating{
            padding: 5px 0px;
        }
        
        .computer-accessories-product-card .rating .icon svg{
            width: 16px;
            height: 16px;
        }
        
        .computer-accessories-product-card .rating .count{
            color: var(--Gray-500, #77878F);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px;
        }

/*********************************************************Computer Accessories Section End***************************************************/

/**--------------------------------------------------------Third Banner Section------------------------------------------------------------**/

.third-banner-section{
    width: 100%;
    height: 100%;
    background: #FFF;
}

.third-banner-section .third-banner{
    background: var(--Primary-100, #FFE7D6);
    display: flex;
    padding: 40px 90px;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.third-banner .left-content .save-up-to{
    display: inline-flex;
    padding: 6px 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
    background: var(--Secondary-500, #2DA5F3);
}

.third-banner .left-content .save-up-to span{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.third-banner .product-name{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 48px;
font-style: normal;
font-weight: 600;
line-height: 56px; 
}

.third-banner .product-detail{
    color: var(--Gray-900, #191C1F);

/* Body/XXL, 400 */
font-family: "Public Sans";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 133.333% */
}

.third-banner .shop-now-btn{
display: inline-flex;
padding: 0px 30px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 3px;
background: var(--Primary-500, #FA8232);
}

.third-banner .shop-now-btn span{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px; 
    letter-spacing: 0.192px;
    text-transform: uppercase;
}

.third-banner .right-content{
    position: relative;
}

.third-banner .right-content .price{
position: absolute;
top: 9%;
right: 76%;
z-index: 100;
display: inline-flex;
padding: 35px 25px;
align-items: flex-start;
gap: 10px;
border-radius: 50%;
border: 6px solid var(--Gray-00, #FFF);
background: var(--Primary-200, #FFCEAD);
}

.third-banner .right-content .price span{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

/**********************************************************Third Banner Section End**********************************************************/

/**------------------------------------------------------Marketing Strategics Section-------------------------------------------------------**/

.marketing-strategies-section{
    width: 100%;
    height: 100%;
    background: #FFF;
}

.marketing-strategies .title{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}

.marketing-strategies .product-details .card{
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 3px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.marketing-strategies .product-details .card img{
    width: 80px;
    height: 80px;
}

.marketing-strategies .product-details .card .product-name{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.marketing-strategies .product-details .card .product-price{
    color: var(--Secondary-500, #2DA5F3);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; 
}

/*****************************************************Marketing Strategies Section End*******************************************************/

/** */ --------------------------------------------------------Latest News Section----------------------------------------------------* */
.latest-news-section{
display: flex;
padding: 72px 300px;
flex-direction: column;
align-items: flex-start;
gap: 40px;
background: var(--Gray-50, #F2F4F5);
}

.latest-news .latest-news-card .card{
    display: flex;
    padding: 28px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;

    border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.04);
}

.latest-news .latest-news-card img{
width: 100%;
height: 248px;
border-radius: 3px;
object-fit: cover;
}

.latest-news .latest-news-card  .common{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.latest-news .latest-news-card .icon svg{
    width: 24px;
    height: 24px;
}

.latest-news .latest-news-card .title{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px;
padding-top: 8px;
}

.latest-news .latest-news-card .description{
    color: var(--Gray-500, #77878F);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.latest-news .latest-news-card .read-more-btn{
    display: inline-flex;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
    border: 2px solid var(--Primary-100, #FFE7D6);
}

.latest-news .latest-news-card .read-more-btn .read-more-text{
    color: var(--Primary-500, #FA8232);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.latest-news .latest-news-card .read-more-btn svg{
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
}
/**************************************************************Latest News Section End************************************************** */

/**************************************************************Subscribe Newsletter Section**********************************************/
.subscribe-newsletter-section{
    width: 100%;
    height: 100%;
    background: #1B6392;
}

.subscribe-newsletter{
display: flex;
padding: 62px 300px;
padding-bottom: 42px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
background: var(--Secondary-700, #1B6392);
}

.subscribe-newsletter .title{
color: var(--Gray-00, #FFF);
text-align: center;
font-family: "Public Sans";
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 40px;
}

.subscribe-newsletter .describe{
    color: var(--Gray-00, #FFF);
    text-align: center;
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.subscribe-newsletter .subscribe-newsletter-input{
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 16px;

    border-radius: 3px;
    background: #FFF;
    box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.12);
}

.subscribe-newsletter .subscribe-input-box{
display: flex;
width: 424px;
padding: 8px 50px 8px 16px;
align-items: center;

border-radius: 2px;
background: var(--Gray-00, #FFF);
}

.subscribe-newsletter .subscribe-input-box input{
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: var(--Gray-500, #77878F);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.subscribe-newsletter .subscribe-btn{
border: none;
outline: none;
display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
}

.subscribe-newsletter .subscribe-btn .subscribe-text{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.subscribe-newsletter .subscribe-btn svg{
    width: 20px;
    height: 20px;
}

.subscribe-newsletter .hr-line{
width: 424px;
height: 1px;
opacity: 0.12;
background: #FFF;
} 

.subscribe-newsletter .company{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 46px;
}

.subscribe-newsletter .company svg{
width: 72px;
height: 72px;
}

/*************************************************************Subscribe Newsletter Section End******************************************/

/******************************************************************Footer Section******************************************************/
.footer-section{
    width: 100%;
    height: 100%;
    background: var(--Gray-900, #191C1F);
}

.footer-section .footer{
padding: 62px 0px;
gap: 24px;
}

.footer .footer-logo{
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: start;
    padding-bottom: 25px;
}

.footer .footer-logo .icon svg{
    width: 48px;
    height: 48px;
}

.footer .footer-logo .text{
    color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 125% */
letter-spacing: -0.64px;
}

.footer .customer-support{
color: var(--Gray-500, #77878F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
margin: 0;
padding: 0;
padding-bottom: 10px;
}

.footer .contact{
    color: var(--Gray-00, #FFF);

/* Body/Large/500 */
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 133.333% */
padding-top: 10px !important;
}

.footer .address{
    color: var(--Gray-300, #ADB7BC);

/* Body/Medium/400 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
padding-top: 10px;
}

.footer .mail{
color: var(--Gray-00, #FFF);

/* Body/Medium/500 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
}

.footer .top-category{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}

.footer .top-category .title{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
text-transform: uppercase;
}

.footer .top-category .url{
color: var(--Gray-400, #929FA5);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; 
}

.footer .top-category .accessories{
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: start;
}

.footer .top-category .accessories .line{
width: 24px;
height: 2px;
background: #EBC80C;
}

.footer .top-category .accessories .text{
    color: var(--Gray-00, #FFF);

    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}
    
.footer .top-category .browse-all .text{
    color: var(--Warning-500, #EBC80C);

    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.footer .top-category .browse-all .icon svg{
    width: 20px;
    height: 20px;
}

.footer .download-app .title{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: uppercase;
}

.footer .download-app .app-div{
display: flex;
padding: 12px 15px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 3px;
background: var(--Gray-800, #303639);
margin-top: 20px;
}

.footer .download-app .app-div .icon svg{
    width: 32px;
height: 32px;
}

.footer .download-app .get-it-now{
color: #FFF;
font-family: Inter;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 13px; 
}

.footer .download-app .text{
    color: #FFF;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
}

.footer .popular-tag{

}

.footer .popular-tag .title{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: uppercase;
}

.footer .popular-tag .tag{
display: inline-flex;
padding: 6px 12px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
border-radius: 2px;
border: 1px solid var(--Gray-800, #303639);
margin-bottom: 10px;

color: var(--Gray-00, #FFF);

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

.footer-section  .footer-bottom{
display: flex;
padding: 10px 0;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--Gray-900, #191C1F);
box-shadow: 0px 1px 0px 0px #303639 inset;
}

.footer-section .footer-bottom span{
    color: var(--Gray-300, #ADB7BC);
    text-align: center;
    
    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    padding-top: 20px;
}

/**************************************************************Footer Section End****************************************************/

/*********************************************************Product Quick View Start********************************************************/

.quick-view-modal .modal-body{
    position: relative;
}

.quick-view-modal .btn-close{

    position: absolute;
    top: 1%;
    right: -5%;
    z-index: 100;

display: inline-flex;
padding: 12px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.12);
}

.quick-view-modal .btn-close svg{
width: 24px;
height: 24px;
}

.quick-view .thumbnails{
    position: relative;
    height: 100%;
}

/* .quick-view .thumbnails .main-carousel .splide__slide{
width: 96px;
height: 96px;
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
} */


.splide__track--nav>.splide__list>.splide__slide.is-active{
    border: none !important;
}

.splide__track--nav>.splide__list>.splide__slide.is-active img{
    /* width: 100%;
    height: 100%; */
    border-radius: 2px;
    border: 2px solid var(--Primary-500, #FA8232);
}

.quick-view .thumbnails .main-carousel .splide__slide .thumbnail-img{
    /* width: 100%;
    height: 100%; */
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
}

.quick-view .thumbnails .thumbnail-carousel .splide__slide{
    /* width: 616px; */
    width: 100%;
    height: 364px;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
}

.quick-view .thumbnails .thumbnail-carousel .splide__slide .slider-img{
    /* width: 616px; */
    width: 100%;
    height: 364px;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
}

.splide__track--nav>.splide__list>.splide__slide img{
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    cursor: pointer;
    padding: 2px;
}

.splide__arrow--prev{
position: absolute;
top: 40%;
left: -2.5%;
border: none;
outline: none;
display: flex;
padding: 15px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
border: 2px solid var(--Gray-00, #FFF);
opacity: 1 !important;
background: var(--Primary-700, #FA8232) !important;
}

.splide__arrow--prev i{
    /* width: 24px;
    height: 24px; */
    font-size: 18px;
    color: white;
}

.splide__arrow--next{
    position: absolute;
    top: 39%;
    right: -3%;
    border: none;
    outline: none;
    display: flex;
    padding: 15px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    border: 2px solid var(--Gray-00, #FFF);
    opacity: 1 !important;
    background: var(--Primary-700, #FA8232) !important;
    }
    
.splide__arrow--next i{
        /* width: 24px;
        height: 24px; */
        font-size: 18px;
        color: white;
}

.quick-view .product-details .name{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px;
padding-top: 5px;
}

.quick-view .rating-review .rating span svg{
width: 20px;
height: 20px;
}

.quick-view .rating-review .rating .star{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.quick-view .rating-review .review{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
margin-left: 10px;
}

.quick-view .product-details .common-1{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.quick-view .product-details .common-2{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.quick-view .product-details .common-2-color{
color: var(--Success-500, #2DB224);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.quick-view .product-details .price-off{
    padding-top: 10px;
    padding-bottom: 15px;
}

.quick-view .product-details .price .current-price{
    color: var(--Secondary-500, #2DA5F3);
    font-family: "Public Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
}

.quick-view .product-details .price .actual-price{
    color: var(--Gray-500, #77878F);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    text-decoration-line: strikethrough;
}

.quick-view .product-details .off{
display: flex;
padding: 5px 10px;
align-items: flex-start;
gap: 10px;
border-radius: 2px;
background: var(--Warning-400, #EFD33D);
margin-left: 8px;
}

.quick-view .product-details .off span{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.quick-view .product-details .specification{
    padding-top: 15px;
}

/* .quick-view .product-details .specification select{
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
} */

.quick-view .product-details .specification label{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.quick-view .product-details .specification select option{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.quick-view .product-details .specification .form-check {
    display: inline-block;
}

.quick-view .product-details .specification .form-check-label {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
}

.quick-view .product-details .specification .form-check-label.grey {
    background: #B1B5B8;
    box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
}

.quick-view .product-details .specification .form-check-label.white {
    background: #E0E1E1;
    box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
}

.quick-view .product-details .specification .form-check-input {
    display: none;
}

.quick-view .product-details .specification .form-check-input:checked + .form-check-label {
    border-radius: 50%;
    outline: 2px solid var(--Primary-500, #FA8232);
    outline-offset: 3px;
}

.quick-view .qty--add-to-card--buy-now{
    margin-left: 2px;
    padding-top: 5px;
    padding-bottom: 20px;
}

.quick-view .qty{
display: flex;
/* padding: 16px 10px; */
/* width: 164px; */
height: 54px;
align-items: center;
justify-content: space-between;
border-radius: 3px;
border: 2px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.quick-view .qty .minus,.plus svg{
width: 16px;
height: 16px;
flex-shrink: 0;
cursor: pointer;
}

.quick-view .qty .quantity-input{
color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

.quick-view .qty input:focus{
    outline: none;
    border: none;
}

.quick-view .add-to-card{
border:none;
outline: none;
display: flex;
/* width: 264px; */
/* max-width: 100%; */
padding: 0px 50px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 3px;
background: var(--Primary-500, #FA8232);
}

.quick-view .add-to-card .text{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 53px;
    letter-spacing: 0.192px;
    text-transform: uppercase;
}

.quick-view .add-to-card span svg{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.quick-view .buy-now{
display: flex;
/* padding: 0px 15px; */
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 3px;
border: 2px solid var(--Primary-500, #FA8232);
}

.quick-view .buy-now span{
    color: var(--Primary-500, #FA8232);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 49px;
    letter-spacing: 0.192px;
    text-transform: uppercase;
}

.quick-view .wishlist-compare{
    display: flex;
    align-items: content;
    justify-content: start;
}

.quick-view .add-to-compare{
    padding-left: 10px;
}

.quick-view .add-to-wishlist .text,.add-to-compare .text{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.quick-view .add-to-wishlist span svg,.add-to-compare span svg{
    width: 24px;
    height: 24px;
}

.quick-view .share-product .text{
color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.quick-view .share-product a{
    /* display: inline-flex;
justify-content: evenly;
align-items: center;
gap: 16px; */
padding-left: 5px;
}

.quick-view .share-product a svg{
width: 16px;
height: 16px;
color: #5F6C72;
}

.quick-view .share-product a:hover svg{
    width: 16px;
    height: 16px;
    color: #FA8232;
}

.quick-view .payment-card{
    padding: 10px 20px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    margin-top: 15px;
}

.quick-view .payment-card .title{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.quick-view .payment-card .payment-card-option{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
}

.quick-view .payment-card .payment-card-option img{
    width: 36px;
    height: 30px;
}

/*********************************************************Product Quick View End*********************************************************/

/**####################################################################################################################################**/
/**#########################################################Shop Page CSS##############################################################**/
/**####################################################################################################################################**/

.breadcrumb{
display: flex;
width: 100%;
height: 60px;
/* padding: 0px 1242px 0px 300px; */
padding-top:12px;
align-items: center;
background: var(--Gray-50, #F2F4F5);
}

.breadcrumb svg{
width: 20px;
height: 20px;
}

.breadcrumb .text{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.breadcrumb .current-text{
    color: var(--Secondary-500, #2DA5F3);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
}

.shop-page-section{
    background: #FFF;
}

.shop-page{
    padding: 30px 0px;
}

.shop-page .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: uppercase;
}

.shop-page  label{
color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 20px;
padding-left: 5px;
}

.shop-page .category label.active{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding-left: 3px;
}

.shop-page input[type="radio"]{
    width: 20px;
    height: 20px;
    /* border-radius: 100px;
    border: 1px solid var(--Gray-200, #C9CFD2);
    background: var(--Gray-00, #FFF);
} */
}

.shop-page .form-check-input:focus {
    outline: none;
    border:none;
}


.shop-page .form-check-input:checked {
    outline: none;
    background-color: var(--Primary-500, #FA8232);
    border-color: var(--Primary-500, #FA8232);
}

.shop-page .shop-page-sidebar .hr-line{
/* width: 312px; */
width: 100%;
height: 1px;
background: #E4E7E9;
margin: 20px 0px; 
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

.price-range-slider{
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-height: 100vh; */
  /* background: #17a2b8; */
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
::selection {
  color: #fff;
  background: #17a2b8;
}
.wrapper {
  /* width: 100%; */
  /* background: #fff; */
  /* border-radius: 10px; */
  /* padding: 20px 25px 40px; */
  /* box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); */
}
header h2 {
  font-size: 24px;
  font-weight: 600;
}
header p {
  margin-top: 5px;
  font-size: 16px;
}
.price-input {
  width: 100%;
  display: flex;
  /* margin: 30px 0 35px; */
  margin: 20px 0;
}
.price-input .field {
  display: flex;
  width: 100%;
  height: 45px;
  align-items: center;
}

.field input {
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 19px;
  /* margin-left: 12px; */
  border-radius: 5px;
  text-align: center;
  border: 1px solid #999;
  -moz-appearance: textfield;
}

.field input.input-max {
    margin-left: 12px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.price-input .separator {
  width: 130px;
  display: flex;
  font-size: 19px;
  align-items: center;
  justify-content: center;
}
.slider {
  height: 5px;
  position: relative;
  background: #ddd;
  border-radius: 5px;
  margin-top: 10px;
}
.slider .progress {
  height: 100%;
  left: 25%;
  right: 25%;
  /* right: 48%; */
  position: absolute;
  border-radius: 5px;
  /* background: #17a2b8; */
  background: #FA8232;
}
.range-input {
  position: relative;
}
.range-input input {
  position: absolute;
  width: 100%;
  height: 5px;
  top: -5px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
  height: 17px;
  width: 17px;
  border-radius: 50%;
  /* background: #17a2b8; */
  background: var(--Gray-00, #FFF);
  background: var(--Gray-00, #FA8232);
  border:2px var(--Primary-500, #FA8232) !important;
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 0 6px rgba(#FA8232, 0.5);
}
input[type="range"]::-moz-range-thumb {
  height: 17px;
  width: 17px;
  border: none;
  border-radius: 50%;
  background: var(--Gray-00, #FFF);
  background: var(--Gray-00, #FA8232);
  border:2px var(--Primary-500, #FA8232) !important;
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(#FA8232, 0.5);
}

.shop-page input[type="checkbox"]{
width: 20px;
height: 20px;
border-radius: 2px;
/* border: 1px solid var(--Gray-200, #C9CFD2);
background: var(--Gray-00, #FFF); */
}

.popular-tag-div{
    margin-bottom: 20px;
}

.popular-tag .tag{
display: inline-flex;
flex-wrap: wrap;
padding: 6px 12px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
margin-bottom: 10px;

color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}

.shop-page-sidebar-banner{
    display: flex;
padding: 32px;
flex-direction: column;
justify-content: center;
align-items: center;
/* gap: 24px; */
border-radius: 4px;
border: 4px solid var(--Primary-100, #FFE7D6);
background: var(--Gray-00, #FFF);
}

.shop-page-sidebar-banner .category {
    padding-top: 15px;
}

.shop-page-sidebar-banner .category .text{
    color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: 20px;
}

.shop-page-sidebar-banner .category icon svg{
    width:  26px;
    height: 26px;
}

.shop-page-sidebar-banner .type{

    color: var(--Gray-900, #FA8232);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    /* line-height: 20px; */
    padding-top: 3px;
}

.shop-page-sidebar-banner .name{
color: var(--Gray-900, #191C1F);
text-align: center;
font-family: "Public Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 32px;
}

.shop-page-sidebar-banner .price-div{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.shop-page-sidebar-banner .price-div .text{
color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.shop-page-sidebar-banner .price-div .price{
    display: flex;
    padding: 6px 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 3px;
    background: var(--Warning-300, #F3DE6D);

color: var(--Gray-900, #191C1F);
text-align: center;
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}

.shop-page-sidebar-banner .add-to-cart{
    border: none;
    outline:none;
    display: flex;
    width: 100%;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    margin: 15px 0;
}

.shop-page-sidebar-banner .add-to-cart svg{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.shop-page-sidebar-banner .add-to-cart .text{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;
    letter-spacing: 0.168px;
    text-transform: uppercase;
    margin-top: 1px;
}

.shop-page-sidebar-banner .view-details{
    display: flex;
    width: 100%;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
    border: 2px solid var(--Primary-500, #FA8232);
    color: var(--Primary-500, #FA8232);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.sidebar-btn{
    border:none;
    outline:none;
    display: flex;
    width: 100%;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    background: var(--Primary-500, #1B6392);
    margin: 10px 0;

color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.sidebar-btn svg{
    height: 22px;
    width: 22px;
    color: white;
}

.shop-page-search{
display: flex;
width: 100%;
height: 44px;
/* padding: 12px 16px; */
justify-content: start;
align-items: center;
/* gap: 8px; */
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.shop-page-search .search-box {
    width: 93%;
    height: 100%;
    padding:  0 10px;
}

.shop-page-search .search-box input[type="text"]{
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: "Public Sans";
    font-weight: 400;
    line-height: 20px;
    text-align: start;
}

.shop-page-search .filter select{
display: flex;
width: 180px;
height: 44px;
padding: 12px 16px;
justify-content: center;
align-items: center;
gap: 45px;
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.shop-page .active-filter{
    display: flex;
    flex-wrap: wrap;
/* width: 984px; */
width: 100%;
padding: 12px 24px;
justify-content: space-between;
align-items: center;
border-radius: 4px;
background: var(--Gray-50, #F2F4F5);
margin: 20px 0;
/* margin-left: 10px; */
/* margin-right: 10px; */
}

.shop-page .active-filters-text{
    color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.shop-page .show-filters .name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.shop-page .show-filters .close-icon{
    width: 14px;
    height: 14px;
}

.shop-page .search-found .found-count{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.shop-page .search-found .text{
    color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}



.shop-page-product .featured-product-card{
    position: relative; 
    overflow: hidden;
    /* width: 248px; */
    width: 100%;
    height: 320px;
    border-radius: 3px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    transition: all 0.3s ease-in-out;
}

.shop-page-product .featured-product-card .card .card-body{
    margin: 0;
    padding: 0;
    padding: 15px;
}

.shop-page-product .featured-product-card .image-container {
        position: relative;
}
    
.shop-page-product .featured-product-card .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
        opacity: 0;
        transition: opacity 0.3s ease;
}
    
.shop-page-product .featured-product-card:hover .image-overlay {
        opacity: 1;
}
    
.shop-page-product .featured-product-card:hover .wishlist-cart-preview {
        display: flex !important;
}

.shop-page-product .featured-product-card:hover{
        border-radius: 3px;
        border: 1px solid var(--Gray-200, #C9CFD2);
        background: var(--Gray-00, #FFF);
        box-shadow: 0px 8px 24px 0px rgba(25, 28, 31, 0.12);
}
    
.shop-page-product .featured-product-card .sold-out-tag{
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    padding: 5px 10px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
    background: var(--Gray-400, #929FA5);
}
    
.shop-page-product .featured-product-card .sold-out-tag span{
        color: var(--Gray-00, #FFF);
    
        /* Body/Tiny/600 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; /* 133.333% */
}
    
.shop-page-product .featured-product-card .off{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
        background: var(--Warning-400, #EFD33D);
}
    
.shop-page-product .featured-product-card .off span{
        color: var(--Gray-900, #191C1F);
    
        /* Body/Tiny/600 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; /* 133.333% */
}
    
.shop-page-product .featured-product-card .hot-tag{
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    padding: 5px 10px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
    background: var(--Danger-500, #EE5858);
}
    
.shop-page-product .featured-product-card .hot-tag span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; 
}

.shop-page-product .featured-product-card .best-deals-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
        background: var(--Secondary-500, #2DA5F3);
}
        
.shop-page-product .featured-product-card .best-deals-tag span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px;
}

.shop-page-product .featured-product-card .sale{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
        background: var(--Success-500, #2DB224);
}
        
.shop-page-product .featured-product-card .sale span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; 
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview{
        position: absolute;
        top: 27%;
        left: 11%;
        display: none;
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon{
    display: flex;
    /* padding: 12px; */
    width: 40px !important;
    height: 40px !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 50%;
    /* background: var(--Gray-00, #62a7c2); */
    background: var(--Gray-00, #FFF);
    margin: 0 5px;
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon{
        display: flex;
        /* padding: 12px; */
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 50%;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 5px;
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon{
            display: flex;
            /* padding: 12px; */
            width: 40px;
            height: 40px;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 100%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 5px;
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon svg{
    width: 20px;
    height: 20px;
    color: black;
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon svg{
        width: 20px;
        height: 20px;
        color: black;
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon svg{
            width: 20px;
            height: 20px;
            color: black;
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover {
        background: var(--Primary-500, #FA8232);
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon:hover {
        background: var(--Primary-500, #FA8232);
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon:hover {
        background: var(--Primary-500, #FA8232);
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
        color: white;
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon:hover svg{
        color: white;
}
    
.shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon:hover svg{
        color: white;
}
    
.shop-page-product .featured-product-card img{
        /* width: 216px; */
    width: 100%;
    height: 172px;
    flex-shrink: 0;
}
    
.shop-page-product .featured-product-card .product-name{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
}
    
.shop-page-product .featured-product-card .actual-price{
        color: var(--Gray-400, #929FA5);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    text-decoration-line: strikethrough;
    padding-top: 5px;
}
    
.shop-page-product .featured-product-card .product-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        padding-top: 5px;
}

.shop-page-product .featured-product-card .rating{
        padding: 5px 0px;
}
    
.shop-page-product .featured-product-card .rating .icon svg{
        width: 16px;
        height: 16px;
}
    
.shop-page-product .featured-product-card .rating .count{
        color: var(--Gray-500, #77878F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
}

.shop-page-pagination{
    padding: 30px 0px;
}

.shop-page-pagination .pagination{
    display: flex;
    padding: 10px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.shop-page-pagination .pagination .prev{
    display: flex;
    padding: 8px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 100px;
    border: 1.5px solid var(--Primary-500, #FA8232);
}

.shop-page-pagination .pagination .next{
    display: flex;
    padding: 8px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 100px;
    border: 1.5px solid var(--Primary-500, #FA8232);
}

.shop-page-pagination .pagination .prev svg{
    width: 24px;
    height: 24px;
}

.shop-page-pagination .pagination .next svg{
    width: 24px;
    height: 24px;
}

.shop-page-pagination .pagination .page{
    display: flex;
/* padding: 8px; */
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
border: 1.5px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);

color: var(--Gray-900, #191C1F);
text-align: center;
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
transition: 0.3 all ease-in-out;
}

.shop-page-pagination .pagination .page:hover{
    background: var(--Primary-500, #FA8232);
    color: var(--Gray-00, #FFF);
}


/**todo:###################################################################################################################################**/
/**######################################################Shop Page CSS End############################################################**/
/**todo:##################################################################################################################################**/

/**####################################################################################################################################**/
/**###################################################Product Detail Page CSS End######################################################**/
/**####################################################################################################################################**/

.product-detail-section{
    width: 100%;
    height: 100%;
    background: #FFF;
    padding: 20px 0px;
}

.product-detail-section .product-detail{

}


.product-detail-page .quick-view .thumbnails{
    position: relative;
    height: 100%;
}

/* .quick-view .thumbnails .main-carousel .splide__slide{
width: 96px;
height: 96px;
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
} */

.product-detail-page .splide__track--nav>.splide__list>.splide__slide.is-active{
    border: none !important;
}

.product-detail-page .splide__track--nav>.splide__list>.splide__slide.is-active img{
    /* width: 100%;
    height: 100%; */
    border-radius: 2px;
    border: 2px solid var(--Primary-500, #FA8232);
}

.product-detail-page .quick-view .thumbnails .main-carousel .splide__slide .thumbnail-img{
    /* width: 100%;
    height: 100%; */
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
}

.product-detail-page .quick-view .thumbnails #product-detail-main-carousel .splide__slide.is-active{
    /* width: 616px; */
    width: 100%;
    height: 364px;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    padding: 10px;
}

.product-detail-page .quick-view .thumbnails #product-detail-main-carousel .splide__slide.is-active img{
    width: 100%;
    height: 100%;
    object-fit: contain;
} 

.product-detail-page .quick-view .thumbnails #product-detail-thumbnail-carousel .splide__slide{
    /* width: 616px; */
    width: 100%;
    height: 96px;
    border-radius: 3px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    /* padding: 10px; */
}

.product-detail-page .quick-view .thumbnails #product-detail-thumbnail-carousel .splide__slide.is-active{
    /* width: 616px; */
    width: 100%;
    height: 96px;
    border-radius: 3px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    /* padding: 10px; */
}

.product-detail-page .quick-view .thumbnails #product-detail-thumbnail-carousel .splide__slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} 

.product-detail-page .quick-view .thumbnails #product-detail-thumbnail-carousel .splide__slide.is-active img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} 

.product-detail-page .splide__track--nav>.splide__list>.splide__slide img{
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    cursor: pointer;
    padding: 2px;
}

.product-detail-page .splide__arrow--prev{
position: absolute;
top: 50%;
left: -3.5%;
border: none;
outline: none;
display: flex;
padding: 15px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
border: 2px solid var(--Gray-00, #FFF);
opacity: 1 !important;
background: var(--Primary-700, #FA8232) !important;
}

.product-detail-page .splide__arrow--prev i{
    /* width: 24px;
    height: 24px; */
    font-size: 18px;
    color: white;
}

.product-detail-page .splide__arrow--next{
    position: absolute;
    top: 50%;
    right: -3.5%;
    border: none;
    outline: none;
    display: flex;
    padding: 15px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    border: 2px solid var(--Gray-00, #FFF);
    opacity: 1 !important;
    background: var(--Primary-700, #FA8232) !important;
    }
    
.product-detail-page .splide__arrow--next i{
        /* width: 24px;
        height: 24px; */
        font-size: 18px;
        color: white;
}

.product-detail-page .quick-view .product-details .name{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px;
padding-top: 5px;
}

.product-detail-page .quick-view .rating-review .rating svg{
width: 20px;
height: 20px;
}

.product-detail-page .quick-view .rating-review .rating .star{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.product-detail-page .quick-view .rating-review .review{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
margin-left: 10px;
}

.product-detail-page .quick-view .product-details .common-1{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.product-detail-page .quick-view .product-details .common-2{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.product-detail-page .quick-view .product-details .common-2-color{
color: var(--Success-500, #2DB224);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.product-detail-page .quick-view .product-details .price-off{
    padding-top: 10px;
    padding-bottom: 15px;
}

.product-detail-page .quick-view .product-details .price .current-price{
    color: var(--Secondary-500, #2DA5F3);
    font-family: "Public Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
}

.product-detail-page .quick-view .product-details .price .actual-price{
    color: var(--Gray-500, #77878F);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    text-decoration-line: strikethrough;
}

.product-detail-page .quick-view .product-details .off{
display: flex;
padding: 5px 10px;
align-items: flex-start;
gap: 10px;
border-radius: 2px;
background: var(--Warning-400, #EFD33D);
margin-left: 8px;
}

.product-detail-page .quick-view .product-details .off span{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.product-detail-page .quick-view .product-details .specification{
    padding-top: 15px;
}

/* .quick-view .product-details .specification select{
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
} */

.product-detail-page .quick-view .product-details .specification label{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.product-detail-page .quick-view .product-details .specification select option{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.product-detail-page .quick-view .product-details .specification .form-check {
    display: inline-block;
}

.product-detail-page .quick-view .product-details .specification .form-check-label {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
}

.product-detail-page .quick-view .product-details .specification .form-check-label.grey {
    background: #B1B5B8;
    box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
}

.product-detail-page .quick-view .product-details .specification .form-check-label.white {
    background: #E0E1E1;
    box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
}

.product-detail-page .quick-view .product-details .specification .form-check-input {
    display: none;
}

.product-detail-page .quick-view .product-details .specification .form-check-input:checked + .form-check-label {
    border-radius: 50%;
    outline: 2px solid var(--Primary-500, #FA8232);
    outline-offset: 3px;
}

.product-detail-page .quick-view .qty--add-to-card--buy-now{
    margin-left: 2px;
    padding-top: 5px;
    padding-bottom: 20px;
}

.product-detail-page .quick-view .qty{
display: flex;
/* padding: 16px 10px; */
/* width: 164px; */
height: 54px;
justify-content: space-between;
align-items: center;
border-radius: 3px;
border: 2px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.product-detail-page .quick-view .qty .minus,.plus svg{
width: 16px;
height: 16px;
flex-shrink: 0;
cursor: pointer;
}

.product-detail-page .quick-view .qty .quantity-input{
color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

.product-detail-page .quick-view .qty input:focus{
    outline: none;
    border: none;
}

.product-detail-page .quick-view .add-to-card{
border:none;
outline: none;
display: flex;
/* width: 264px; */
/* max-width: 100%; */
padding: 0px 32px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 3px;
background: var(--Primary-500, #FA8232);
}

.product-detail-page .quick-view .add-to-card .text{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 53px;
    letter-spacing: 0.192px;
    text-transform: uppercase;
}

.product-detail-page .quick-view .add-to-card span svg{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.quick-view .buy-now{
display: flex;
/* padding: 0px 15px; */
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 3px;
border: 2px solid var(--Primary-500, #FA8232);
}

.product-detail-page .quick-view .buy-now span{
    color: var(--Primary-500, #FA8232);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 49px;
    letter-spacing: 0.192px;
    text-transform: uppercase;
}

.product-detail-page .quick-view .wishlist-compare{
    display: flex;
    align-items: content;
    justify-content: start;
}

.product-detail-page .quick-view .add-to-compare{
    padding-left: 10px;
}

.product-detail-page .quick-view .add-to-wishlist .text,.add-to-compare .text{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.product-detail-page .quick-view .add-to-wishlist span svg,.add-to-compare span svg{
    width: 24px;
    height: 24px;
}

.product-detail-page .quick-view .share-product .text{
color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.product-detail-page .quick-view .share-product a{
    /* display: inline-flex;
justify-content: evenly;
align-items: center;
gap: 16px; */
padding-left: 5px;
}

.product-detail-page .quick-view .share-product a svg{
width: 16px;
height: 16px;
color: #5F6C72;
}

.product-detail-page .quick-view .share-product a:hover svg{
    width: 16px;
    height: 16px;
    color: #FA8232;
}

.product-detail-page .quick-view .payment-card{
    padding: 10px 20px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    margin-top: 15px;
}

.product-detail-page .quick-view .payment-card .title{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.product-detail-page .quick-view .payment-card .payment-card-option{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
}

.product-detail-page .quick-view .payment-card .payment-card-option img{
    width: 36px;
    height: 30px;
}

.additional-information{
    display: flex;
padding-bottom: 40px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.additional-information .nav-tabs {
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 56px;
    /* background-color: #E4E7E9; */
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    border-radius: 4px;
    border-bottom: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
}

.additional-information .nav-tabs .nav-item{
    height: 100%;
    /* display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch; */
}

.additional-information .nav-tabs .nav-link {
    /* margin-bottom:calc(-1 * var(--bs-nav-tabs-border-width)); */
    /* border:var(--bs-nav-tabs-border-width) solid transparent; */
    /* border-top-left-radius:var(--bs-nav-tabs-border-radius); */
    /* border-top-right-radius:var(--bs-nav-tabs-border-radius); */
    border: none;
    margin: 0;
    padding: 0 10px;
    height: 100%;

color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; 
text-transform: uppercase;
}

.additional-information .nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active {
    color: var(--bs-nav-tabs-link-active-color);
    /* background-color: #E4E7E9; */
    /* border-color: var(--bs-nav-tabs-link-active-border-color); */

    color: var(--Gray-900, #191C1F);

/* Label/03 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
text-transform: uppercase;

border-bottom: 2px solid #FA8232;
}

.additional-information .paragraph{
    /* padding: 0px 50px; */
    padding-left: 40px;
    padding-right: 10px;
}

.additional-information .paragraph .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.additional-information .paragraph p{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.additional-information .feature .title{
    color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}

.additional-information .feature .text{
    color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.additional-information .feature .icon svg{
    width: 24px;
height: 24px;
}

.additional-information .hr-line{
    width: 1px;
height: 228px;
background: #E4E7E9;
}

/* .additional-information .shipping-information{
    padding-left: 10px;
} */

.additional-information .shipping-information .title{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; 
}

.additional-information .shipping-information .type{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 20px; 
}

.additional-information .shipping-information .text{
    color: var(--Gray-600, #5F6C72);

    font-family: "Public Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}


.product-detail-page .related-product{
    padding: 60px 0px;
}

.product-detail-page .related-product .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    }
    
.product-detail-page .related-product .product-details .card{
        display: flex;
        padding: 5px;
        justify-content: center;
        align-items: center;
        gap: 3px;
        border-radius: 3px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
.product-detail-page .related-product .product-details .card img{
        width: 80px;
        height: 80px;
    }
    
.product-detail-page .related-product .product-details .card .product-name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
}
    
.product-detail-page .related-product .product-details .card .product-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px; 
}

/**todo:#################################################################################################################################**/
/**###################################################Product Details Page CSS End#####################################################**/
/**todo:################################################################################################################################**/


/**todo:#################################################################################################################################**/
/**###################################################Track Order Page CSS ##############################################################**/
/**todo:################################################################################################################################**/

.track-order-section{
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    padding: 40px 0px;
}

.track-order-section .track-order-page{
    display: flex;
padding-right:  300px;
flex-direction: column;
align-items: flex-start;
gap: 15px;
}

.track-order-page .title{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.track-order-page .description{
    color: var(--Gray-600, #5F6C72);

font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

.track-order-page label{
    color: var(--Gray-900, #191C1F);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

.track-order-page input[type="text"].form-control{
    display: flex;
    height: 44px;
    /* padding: 12px 383px 12px 16px; */
    align-items: center;
    align-self: stretch;
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
}

/* .track-order-page .form-control:focus{
    border: none;
    outline: none;
    outline: 2px solid  var(--Primary-500, #FA8232);
} */

.track-order-page .order-id-message {
    padding-top: 2px; 
}

.track-order-page .order-id-message .icon svg{
    width: 24px;
height: 24px;
} 

.track-order-page .order-id-message .text{
    color: var(--Gray-600, #5F6C72);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.track-order-page .track-order-submit-btn{
    border:none;
    outline: none;
    display: flex;
padding: 0px 30px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 3px;
background: var(--Primary-500, #FA8232);
margin-top: 10px;
}

.track-order-page .track-order-submit-btn .text{
    color: var(--Gray-00, #FFF);

font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 50px;
letter-spacing: 0.192px;
text-transform: uppercase;
}

.track-order-page .track-order-submit-btn .icon svg{
    width: 24px;
height: 24px;
}

/**todo:#################################################################################################################################**/
/**###################################################Track Order Page CSS End#####################################################**/
/**todo:################################################################################################################################**/

/**todo:#################################################################################################################################**/
/**###################################################Track Order Details Page CSS###################################################**/
/**todo:################################################################################################################################**/

.track-order-details-section{
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    display: flex;
    align-items:center;
    /* justify-content: center; */
}

.track-order-details-section .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 20px; */
}

.track-order-details{
display: flex;
/* padding: 72px 468px; */
margin: 72px 0px;
/* padding: 20px; */
width: 984px;
flex-direction: column;
align-items: flex-start;
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.track-order-details .tracking-process{
    padding: 20px;
}

.track-order-details .order-details{
    /* display: flex; */
width: 936px;
padding: 24px;
/* justify-content: space-between; */
/* align-items: center; */
border-radius: 4px;
border: 1px solid var(--Warning-200, #F7E99E);
background: var(--Warning-50, #FDFAE7);
}

.track-order-details .order-details .text{
    color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.track-order-details .order-details .price{
    color: var(--Secondary-500, #2DA5F3);

font-family: "Public Sans";
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 32px; 
}

.track-order-details .order-date{
    padding: 10px 0px;
}

.track-order-details .order-date .text{
    color: var(--Gray-700, #475156);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

.track-order-details .order-date .date{
    color: var(--Gray-900, #191C1F);

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}

.order-tracking{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0px;
}

.order-tracking-status{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0px;
}

.process-line{
position: relative;
width: 702px;
height: 8px;
flex-shrink: 0;
border-radius: 100px;
background: var(--Primary-100, #FFE7D6);
}

.order-tracking-status .process-line-status{
    width: 800px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-tracking-status .process-line-status .order-placed-text-icon{
    padding-left: 15px;
}

/* .order-tracking-status .process-line-status .packaging-text-icon{
    padding-left: 154px;
}

.order-tracking-status .process-line-status .on-the-road-text-icon {
    padding-left: 154px;
}

.order-tracking-status .process-line-status  .delivered-text-icon{
    padding-left: 154px;
} */


.process-line .order-placed{
    position: absolute;
    top: -100%;
    left: -1%;
    z-index: 100;
display: flex;
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background-color: var(--Primary-500, #FA8232);
}

.process-line .order-placed svg{
    width: 12px;
    height: 12px;
}

.process-line .progress-complete-line{
    position: absolute;
top: -10%;
left: 12px;
    width: 234px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 100px;
background: var(--Primary-500, #FA8232);
}

.process-line .packaging{
position: absolute;
top: -100%;
left: 234px;
z-index: 100;
width: 24px;
height: 24px;
flex-shrink: 0;
background: var(--Primary-500, #FA8232);
border-radius: 50%;
stroke-width: 2px;
stroke: var(--Gray-00, #FFF);
}

.process-line .on-the-road{
    position: absolute;
top: -100%;
left: 468px;
z-index: 100;
    width: 24px;
height: 24px;
flex-shrink: 0;
background: var(--Gray-00, #FFF);
border-radius: 50%;
outline: 2px solid var(--Primary-500, #FA8232);
}

.process-line .delivered{
    position: absolute;
top: -100%;
left: 702px;
z-index: 100;
    width: 24px;
height: 24px;
flex-shrink: 0;
background: var(--Gray-00, #FFF);
border-radius: 50%;
outline: 2px solid var(--Primary-500, #FA8232);
}

.track-order-details .hr-line{
    display: flex;
width: 100%;
height: 2px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.track-order-details .order-activity{
    padding: 24px;
}

.track-order-details .order-activity .title{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}

.track-order-details .order-activity .success-div-icon{
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
border: 1px solid var(--Success-100, #D5F0D3);
background: var(--Success-50, #EAF7E9);
}

.track-order-details .order-activity .secondary-div-icon{
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
border: 1px solid var(--Secondary-100, #D5EDFD);
background: var(--Secondary-50, #EAF6FE);
}

.track-order-details .order-activity .activity svg{
    width: 24px;
height: 24px;
}

.track-order-details .order-activity .activity .text{
    color: var(--Gray-900, #191C1F);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.track-order-details .order-activity .activity .date{
    color: var(--Gray-500, #77878F);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

/**todo:#################################################################################################################################**/
/**###################################################Track Order Details Page CSS End###################################################**/
/**todo:################################################################################################################################**/

/**todo:#################################################################################################################################**/
/**#######################################################Compare Page CSS End########################################################**/
/**todo:################################################################################################################################**/

.compare-section{
    /* display: inline-flex; */
/* flex-direction: column; */
/* justify-content: center; */
/* align-items: center; */
/* gap: 72px; */
background: #FFF;
padding: 72px 0px;
}

.compare-section .compare{
    /* width: 1320px; */
    width: 100%;
/* height: 896px; */
height: 100%;
    border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.compare-section  .product-feature{
    padding: 26px;
}

.compare-section  .custom-border-end{
    width: 1px;
height: 100%;
background: #E4E7E9;
}

.compare-section  .product-feature .close-icon svg{
    width: 24px;
height: 24px;
}

.compare-section  .product-feature img{
    width: 100%;
height: 272px;
}

.compare-section  .product-feature .name{
    color: var(--Gray-900, #191C1F);

/* Body/Medium/400 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}

.compare-section  .product-feature .add-to-cart{
border: none;
outline: none;
display: flex;
/* width: 212px; */
width: 100%;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
}

.compare-section  .product-feature .add-to-cart.grey{
    border: none;
    outline: none;
    display: flex;
    /* width: 212px; */
    width: 100%;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 2px;
    background: var(--Gray-300, #ADB7BC);
}

.compare-section  .product-feature .add-to-cart .text{
    color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
/* margin-top: 3px; */
}

.compare-section .product-feature .add-to-cart .icon{
    margin-bottom: 5px;
}

.compare-section .product-feature .add-to-cart .icon svg{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.compare-section .product-feature .wishlist-div{
    display: flex;
padding: 12px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 2px;
border: 1.5px solid var(--Primary-100, #FFE7D6);
}

.compare-section .product-feature .wishlist-div.grey{
    display: flex;
padding: 12px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 2px;
border: 1.5px solid var(--Gray-100, #E4E7E9);
}

.compare-section .div-grey{
    background: var(--Gray-50, #F2F4F5);
}

.compare-section .div-grey-padding{
    display: flex;
    padding: 11px 24px;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.compare-section .rating-review .rating svg{
    width: 20px;
    height: 20px;
}

.compare-section .rating-review .review{
    color: var(--Gray-500, #77878F);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
padding-top: 5px;
}

.compare-section .div-white{
    background-color: #fff;
}

.compare-section .price{
    color: var(--Secondary-500, #2DA5F3);

font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; 
}

.compare-section .common-text{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.compare-section .in-stock{
    color: var(--Success-500, #2DB224);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.compare-section .out-of-stock{
    color: var(--Danger-500, #EE5858);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

/**todo:#################################################################################################################################**/
/**#######################################################Compare Page CSS End#########################################################**/
/**todo:################################################################################################################################**/

/**todo:#################################################################################################################################**/
/**#########################################################Wishlist Page CSS ###########################################################**/
/**todo:################################################################################################################################**/

.wishlist-section{
    /* display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center; */
padding: 72px 0px;
background: #FFF;
}

.wishlist-page .card{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.wishlist-page .card .card-header{
    border:none;
    display: flex;
padding: 20px 24px;
align-items: flex-start;
gap: 10px;
background-color: #fff;

color: var(--Gray-900, #191C1F);

/* Body/Large/500 */
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
/* line-height: 24px;  */
}

.wishlist-page .card .heading-title{
    display: flex;
    width: 100%;
    height: 38px;
/* padding: 10px 24px; */
align-items: center;
/* gap: 24px; */
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-50, #F2F4F5);
}

.wishlist-page .card .heading-title .text{
    color: var(--Gray-700, #475156);

    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    text-transform: uppercase;
}

.wishlist-page .product{

}

.wishlist-page .product img{
    width: 72px;
height: 72px;
}

.wishlist-page .product .description{
    color: var(--Gray-700, #475156);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.wishlist-page .product .price .actual{
    color: var(--Gray-400, #929FA5);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
text-decoration-line: strikethrough;
}

.wishlist-page .product .price .current{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.wishlist-page .product .in-stock{
    color: var(--Success-500, #2DB224);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; 
}

.wishlist-page .product .out-of-stock{
    color: var(--Danger-500, #EE5858);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; 
}

.wishlist-page .product .add-to-card{
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
}

.wishlist-page .product .add-to-card.grey{
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Gray-300, #ADB7BC);
}

.wishlist-page .product .add-to-card .text{
    color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.wishlist-page .product .add-to-card .icon svg{
    width: 20px;
    height: 20px;
}

.wishlist-page .product .remove-btn .icon svg{
    width: 24px;
    height: 24px;
}

/**todo:#################################################################################################################################**/
/**#######################################################Wishlist Page CSS End#########################################################**/
/**todo:################################################################################################################################**/

/**todo:#################################################################################################################################**/
/**#####################################################Shopping Card Page CSS End#######################################################**/
/**todo:################################################################################################################################**/

.shopping-card-section{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    padding: 62px 0px;
}

.shopping-card .quantity-div{
    display: flex;
/* width: 148px; */
width: 100%;
padding: 12px 20px;
justify-content: space-between;
align-items: center;
border-radius: 3px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.shopping-card .quantity-div .minus svg{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.shopping-card .quantity-div .qty-count input{
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
}

.shopping-card .quantity-div .qty-count input:focus{
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
}

.shopping-card .quantity-div .plus svg{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.shopping-card .hr-line{
    width: 100%;
height: 1px;
background: #E4E7E9;
}

.shopping-card .card-bottom{
    padding: 24px;
}

.shopping-card .card-bottom a{
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
border: 2px solid var(--Secondary-500, #2DA5F3);
}

.shopping-card .card-bottom a .text{
    color: var(--Secondary-500, #2DA5F3);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 45px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.shopping-card-section  .shopping-card .card-bottom a .icon svg{
    width: 20px;
height: 20px;
}

.summery .summery-hr-line{
    width: 100%;
height: 1px;
background: #E4E7E9;
}

.shopping-card-section .summery .title{
    color: var(--Gray-900, #191C1F);

    /* Body/Large/500 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 133.333% */
}

.shopping-card-section .summery .text{
    color: var(--Gray-600, #5F6C72);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.shopping-card-section .summery .price{
    color: var(--Gray-900, #191C1F);

    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.shopping-card-section .summery .total-text{
    color: var(--Gray-900, #191C1F);

    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.shopping-card-section .summery .total-price{
    color: var(--Gray-900, #191C1F);

    /* Body/Medium/600 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}

.shopping-card-section .process-to-checkout{
    display: flex;
width: 100%;
padding: 0px 32px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 3px;
background: var(--Primary-500, #FA8232);
}

.shopping-card-section .process-to-checkout .text{
    color: var(--Gray-00, #FFF);

    /* Heading/06 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px; /* 350% */
    letter-spacing: 0.192px;
    text-transform: uppercase;
}

.shopping-card-section .process-to-checkout .icon svg{
    width: 24px;
height: 24px;
flex-shrink: 0;
}

.shopping-card-section .coupon .card-header{
    border: none;
    outline: none;
    display: flex;
padding: 20px 24px;
align-items: flex-start;
gap: 10px;
border: 1px solid var(--Gray-100, #E4E7E9);

    color: var(--Gray-900, #191C1F);

    /* Body/Large/500 */
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 133.333% */
}

.shopping-card-section .coupon-btn{
    border: none;
    outline: none;
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Secondary-500, #2DA5F3);

color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

/**todo:#################################################################################################################################**/
/**#####################################################Shopping Card Page CSS End#####################################################**/
/**todo:################################################################################################################################**/

/**todo:#################################################################################################################################**/
/**######################################################Checkout Page CSS########################################################**/
/**todo:################################################################################################################################**/

.checkout-section{
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    padding: 62px 0px;
}

.checkout-section .title{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}

.checkout-section label{
    color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.checkout-section input[type="text"], input[type="number"], select, select option{
    height: 44px;
    border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);

color: var(--Gray-500, #77878F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.checkout-section textarea{
    /* display: flex; */
width: 100%;
height: 124px;
/* padding: 12px 511px 92px 16px; */
/* align-items: center; */
/* align-self: stretch; */

border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}


.checkout-section .payment{
    display: flex;
padding: 20px 0px 32px 0px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.checkout-section .card-header{
    padding: 15px;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);

    border-top: 0;
    border-left: 0;
    border-right: 0;

    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}

.col-md-2-5{
    width: 20%;
}

.checkout-section .payment-option{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 15px;
}

.checkout-section .payment-option .option .icon svg{
    width: 32px;
    height: 32px;
}

.checkout-section .payment-option .option .name{
    color: var(--Gray-900, #191C1F);
text-align: center;

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
padding-top: 10px;
}

.checkout-section .payment-option .option .form-check-input{
    width: 20px;
height: 20px;
border-radius: 100px;
border: 1px solid var(--Gray-200, #C9CFD2);
/* background: var(--Gray-00, #FFF); */
margin-top: 10px;
margin-bottom: 10px;
}

.checkout-section .hr-line{
    width: 100%;
    height: 1px;
    background: #E4E7E9;
}

.checkout-section .product{
    margin-bottom: 15px;
}

.checkout-section .product img{
    width: 64px;
height: 64px;
border-radius: 2px;
}

.checkout-section .product .name{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.checkout-section .product .qty{
    color: var(--Gray-600, #5F6C72);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
}

.checkout-section .product .price{
    color: var(--Secondary-500, #2DA5F3);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.checkout-section .summery-text{
    color: var(--Gray-600, #5F6C72);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.checkout-section .summery-price{
    color: var(--Gray-900, #191C1F);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.checkout-section .total-text{
    color: var(--Gray-900, #191C1F);

    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
.checkout-section .total-price{
    color: var(--Gray-900, #191C1F);

    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; 
}

.checkout-section .place-order-btn{
border: none;
outline: none;
display: flex;
/* width: 376px; */
width: 100%;
padding: 0px 32px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 3px;
background: var(--Primary-500, #FA8232);
}

.checkout-section .place-order-btn .text{
    color: var(--Gray-00, #FFF);

/* Heading/06 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 56px; /* 350% */
letter-spacing: 0.192px;
text-transform: uppercase;
}

.checkout-section .place-order-btn .icon svg{
    width: 24px;
height: 24px;
flex-shrink: 0;
}

.checkout-section .optional{
    color: var(--Gray-400, #929FA5);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

/**todo:#################################################################################################################################**/
/**########################################################Checkout Page CSS End########################################################**/
/**todo:################################################################################################################################**/

/**todo:#################################################################################################################################**/
/**######################################################Checkout Success Page CSS######################################################**/
/**todo:################################################################################################################################**/

.checkout-success-section{
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    padding: 62px 0px;
}

.checkout-success-section .checkout-success{
    display: flex;
/* padding: 124px 0px; */
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}

.checkout-success-section .checkout-success img{
    width: 66px;
height: 66px;
flex-shrink: 0;
}

.checkout-success-section .checkout-success .title{
    color: var(--Gray-900, #191C1F);
text-align: center;

font-family: "Public Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 32px;
}

.checkout-success-section .checkout-success .description{
    color: #5F6C72;
    text-align: center;
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.checkout-success-section .checkout-success .go-to-dashboard{
    display: flex;
padding: 0px 20px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
border: 2px solid var(--Primary-100, #FFE7D6);
}

.checkout-success-section .checkout-success .go-to-dashboard .icon svg{
    width: 20px;
height: 20px;
}

.checkout-success-section .checkout-success .go-to-dashboard .text{
    color: var(--Primary-500, #FA8232);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.checkout-success-section .checkout-success .view-order{
    display: flex;
padding: 0px 20px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
}

.checkout-success-section .checkout-success .view-order .text{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.checkout-success-section .checkout-success .view-order .icon svg{
    width: 20px;
height: 20px;
}



/**todo:#################################################################################################################################**/
/**####################################################Checkout Success Page CSS End####################################################**/
/**todo:################################################################################################################################**/

/**todo:#################################################################################################################################**/
/**####################################################Signup Signin Page CSS ####################################################**/
/**todo:################################################################################################################################**/

.signup-signin-section{
width: 100%;
height: 100%;
padding: 100px 0px;
background-color: #FFFFFF;
}

.signup-signin{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}

.signup-signin .card{
/* width: 424px; */
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);

/* Dropdown Shadow */
box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
}

.signup-signin ul#signinSignupTab.nav-tabs{
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.signup-signin ul#signinSignupTab.nav-tabs .nav-item{
    border:none;
    height: 100%;
}

.signup-signin ul#signinSignupTab.nav-tabs .nav-link{
    border: none;
    height: 100%;
    padding: 20px;

    color: var(--Gray-900, #191C1F);
text-align: center;


/* Body/XL/600 */
font-family: "Public Sans";
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 140% */
}


.signup-signin ul#signinSignupTab.nav-tabs .nav-link.active{
    border: none;
    height: 100%;
    padding: 20px;

    color: var(--Gray-900, #191C1F);
text-align: center;


/* Body/XL/600 */
font-family: "Public Sans";
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 140% */
}

.signup-signin .nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active {
    border: none !important;
    height: 100% !important; 
    padding: 20px;

    color: var(--Gray-900, #191C1F) !important;
text-align: center !important;


/* Body/XL/600 */
font-family: "Public Sans" !important;
font-size: 20px !important;
font-style: normal !important;
font-weight: 600 !important;
line-height: 28px !important; /* 140% */
text-transform: capitalize !important;

border-bottom: 2px solid #FA8232 !important;
}

.signup-signin label{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.signup-signin input[type="text"], input[type="email"], input[type="password"]{
    height: 44px;
    align-self: stretch;

    border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.signup-signin .forget-password{
    color: var(--Secondary-500, #2DA5F3);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}

.signup-signin .password-div{
    position: relative;
}

.signup-signin .password-div .eye-icon{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.signup-signin .signin-submit-btn{
    border: none;
outline: none;
    display: flex;
width: 100%;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;

border-radius: 2px;
background: var(--Primary-500, #FA8232);
margin-bottom: 10px;
}

.signup-signin .signin-submit-btn .text{
    color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.signup-signin .signin-submit-btn .icon svg{
    width: 20px;
height: 20px;
}

.signup-signin .or-design{
    display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-top: 10px;
padding-bottom: 15px;
}

.signup-signin .hr-line-left{
    width: 45%;
    height: 1px;
    background: #E4E7E9;
}

.signup-signin .hr-line-right{
    width: 45%;
    height: 1px;
    background: #E4E7E9;
}

.signup-signin .or-design .or{
    color: var(--Gray-500, #77878F);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.signup-signin .login-with-google{
    display: flex;
width: 100%;
height: 44px;
/* padding: 12px 121px 12px 16px; */
align-items: center;
gap: 29%;

border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.signup-signin .login-with-google .icon{
    padding-left: 10px;
}

.signup-signin .login-with-google .icon svg{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.signup-signin .login-with-google .text{
    color: var(--Gray-700, #475156);
    text-align: center;
    
    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.signup-signin .login-with-apple{
    display: flex;
width: 100%;
height: 44px;
/* padding: 12px 121px 12px 16px; */
align-items: center;
gap: 29%;

border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.signup-signin .login-with-apple .icon{
    padding-left: 10px;
}

.signup-signin .login-with-apple .icon svg{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.signup-signin .login-with-apple .text{
    color: var(--Gray-700, #475156);
    text-align: center;
    
    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}


.signup-signin .terms.policy{
    color: var(--Secondary-500, #2DA5F3);

    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.signup-signin input[type="checkbox"]{
    display: flex;
width: 18px;
height: 18px;
/* padding: 3px; */
justify-content: center;
align-items: center;

border-radius: 2px;
/* background: var(--Primary-500, #FA8232); */
}

.signup-signin .restriction{
    color: var(--Gray-700, #475156);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

/**todo:#################################################################################################################################**/
/**####################################################Signup Signin Page CSS End####################################################**/
/**todo:################################################################################################################################**/

/**todo:#################################################################################################################################**/
/**####################################################Error Page CSS####################################################**/
/**todo:################################################################################################################################**/

#error-page img{
    /* width: 500px; */
    width: 100%;
height: 350px;
margin-top: -50px;
}

#error-page  .view-order{
    display: flex;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;

    border-radius: 2px;
background: var(--Primary-500, #FA8232);
}

#error-page  .view-order .text{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

#error-page  .go-to-dashboard{
    display: flex;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
    border: 2px solid var(--Primary-100, #FFE7D6);

}

#error-page  .go-to-dashboard .text{
    
    color: var(--Primary-500, #FA8232);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

/**todo:#################################################################################################################################**/
/**####################################################Error Page CSS End####################################################**/
/**todo:################################################################################################################################**/

/***************************************************** Error Page Media Queries ***********************************************************/
@media(min-width: 770px) AND (max-width: 1024px){
    #error-page img{
        /* width: 500px; */
        width: 100%;
    height: 350px;
    margin-top: -50px;
    }
    
    #error-page  .view-order{
        display: flex;
        padding: 0px 20px;
        justify-content: center;
        align-items: center;
        gap: 5px;
    
        border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    }
    
    #error-page  .view-order .text{
        color: var(--Gray-00, #FFF);
    
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px; /* 342.857% */
        letter-spacing: 0.168px;
        text-transform: uppercase;
    }
    
    #error-page  .go-to-dashboard{
        display: flex;
        padding: 0px 10px;
        justify-content: center;
        align-items: center;
        gap: 5px;
        border-radius: 2px;
        border: 2px solid var(--Primary-100, #FFE7D6);
    
    }
    
    #error-page  .go-to-dashboard .text{
        
        color: var(--Primary-500, #FA8232);
    
    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
}

@media(min-width: 430px) AND (max-width: 770px){
    #error-page img{
        /* width: 500px; */
        width: 100%;
    height: 300px;
    margin-top: -50px;
    }
    
    #error-page  .view-order{
        display: flex;
        padding: 0px 10px;
        justify-content: center;
        align-items: center;
        gap: 4px;
    
        border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    }
    
    #error-page  .view-order .text{
        color: var(--Gray-00, #FFF);
    
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 48px; /* 342.857% */
        letter-spacing: 0.168px;
        text-transform: uppercase;
    }
    
    #error-page  .go-to-dashboard{
        display: flex;
        padding: 0px 3px;
        justify-content: center;
        align-items: center;
        gap: 3px;
        border-radius: 2px;
        border: 2px solid var(--Primary-100, #FFE7D6);
    
    }
    
    #error-page  .go-to-dashboard .text{
        
        color: var(--Primary-500, #FA8232);
    
    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 45px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
}

/***************************************************** FAQ  */

/***************************************************** Error Page Media Queries End*********************************************************/

/**---------------------------------------------------------------------------------------------------------------------------------------**/

/**************************************************************************************************************************************/
/**************************************************************************************************************************************/
/**************************************************************************************************************************************/
/*********************************************************Media Queries All CSS********************************************************/
/*************************************************************************************************************************************/
/**************************************************************************************************************************************/

/************************************************SignUp Signin Page Media Queries******************************************************/
@media(min-width: 430px) AND (max-width: 768px){
    
.signup-signin{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    }
    
    .signup-signin .card{
    /* width: 424px; */
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    
    /* Dropdown Shadow */
    box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
    }
    
    .signup-signin ul#signinSignupTab.nav-tabs{
        display:flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .signup-signin ul#signinSignupTab.nav-tabs .nav-item{
        border:none;
        height: 100%;
    }
    
    .signup-signin ul#signinSignupTab.nav-tabs .nav-link{
        border: none;
        height: 100%;
        padding: 20px;
    
        color: var(--Gray-900, #191C1F);
    text-align: center;
    
    
    /* Body/XL/600 */
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
    }
    
    
    .signup-signin ul#signinSignupTab.nav-tabs .nav-link.active{
        border: none;
        height: 100%;
        padding: 20px;
    
        color: var(--Gray-900, #191C1F);
    text-align: center;
    
    
    /* Body/XL/600 */
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
    }
    
    .signup-signin .nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active {
        border: none !important;
        height: 100% !important; 
        padding: 20px;
    
        color: var(--Gray-900, #191C1F) !important;
    text-align: center !important;
    
    
    /* Body/XL/600 */
    font-family: "Public Sans" !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 28px !important; /* 140% */
    text-transform: capitalize !important;
    
    border-bottom: 2px solid #FA8232 !important;
    }
    
    .signup-signin label{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .signup-signin input[type="text"], input[type="email"], input[type="password"]{
        height: 44px;
        align-self: stretch;
    
        border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .signup-signin .forget-password{
        color: var(--Secondary-500, #2DA5F3);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    }
    
    .signup-signin .password-div{
        position: relative;
    }
    
    .signup-signin .password-div .eye-icon{
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
    }
    
    .signup-signin .signin-submit-btn{
        border: none;
    outline: none;
        display: flex;
    width: 100%;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    margin-bottom: 10px;
    }
    
    .signup-signin .signin-submit-btn .text{
        color: var(--Gray-00, #FFF);
    
    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
    .signup-signin .signin-submit-btn .icon svg{
        width: 20px;
    height: 20px;
    }
    
    .signup-signin .or-design{
        display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 15px;
    }
    
    .signup-signin .hr-line-left{
        width: 45%;
        height: 1px;
        background: #E4E7E9;
    }
    
    .signup-signin .hr-line-right{
        width: 45%;
        height: 1px;
        background: #E4E7E9;
    }
    
    .signup-signin .or-design .or{
        color: var(--Gray-500, #77878F);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .signup-signin .login-with-google{
        display: flex;
    width: 100%;
    height: 44px;
    /* padding: 12px 121px 12px 16px; */
    align-items: center;
    gap: 9%;
    
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .signup-signin .login-with-google .icon{
        padding-left: 10px;
    }
    
    .signup-signin .login-with-google .icon svg{
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    .signup-signin .login-with-google .text{
        color: var(--Gray-700, #475156);
        text-align: center;
        
        /* Body/Small/400 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
    }
    
    .signup-signin .login-with-apple{
        display: flex;
    width: 100%;
    height: 44px;
    /* padding: 12px 121px 12px 16px; */
    align-items: center;
    gap: 9%;
    
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .signup-signin .login-with-apple .icon{
        padding-left: 10px;
    }
    
    .signup-signin .login-with-apple .icon svg{
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    .signup-signin .login-with-apple .text{
        color: var(--Gray-700, #475156);
        text-align: center;
        
        /* Body/Small/400 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
    }
    
    
    .signup-signin .terms.policy{
        color: var(--Secondary-500, #2DA5F3);
    
        /* Body/Small/500 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }
    
    .signup-signin input[type="checkbox"]{
        display: flex;
    width: 18px;
    height: 18px;
    /* padding: 3px; */
    justify-content: center;
    align-items: center;
    
    border-radius: 2px;
    /* background: var(--Primary-500, #FA8232); */
    }
    
    .signup-signin .restriction{
        color: var(--Gray-700, #475156);
    
    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    }
    
}



/**********************************************SignUp Signin Page Media Queries End***************************************************/

/*************************************************Checkout Success Page Media Queries**************************************************/
@media(min-width: 430px) AND (max-width: 768px){

.checkout-success-section .checkout-success{
    display: flex;
/* padding: 124px 0px; */
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}

.checkout-success-section .checkout-success img{
    width: 66px;
height: 66px;
flex-shrink: 0;
}

.checkout-success-section .checkout-success .title{
    color: var(--Gray-900, #191C1F);
text-align: center;

font-family: "Public Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 32px;
}

.checkout-success-section .checkout-success .description{
    color: #5F6C72;
    text-align: center;
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.checkout-success-section .checkout-success .go-to-dashboard{
    display: flex;
padding: 0px 10px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 2px;
border: 2px solid var(--Primary-100, #FFE7D6);
}

.checkout-success-section .checkout-success .go-to-dashboard .icon svg{
    width: 18px;
height: 18px;
}

.checkout-success-section .checkout-success .go-to-dashboard .text{
    color: var(--Primary-500, #FA8232);

/* Heading/07 */
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.checkout-success-section .checkout-success .view-order{
    display: flex;
padding: 0px 10px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
}

.checkout-success-section .checkout-success .view-order .text{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.checkout-success-section .checkout-success .view-order .icon svg{
    width: 20px;
height: 20px;
}

}
/***********************************************Checkout Success Page Media Queries End************************************************/

/************************************************Checkout Page Media Queries***********************************************************/
@media(min-width: 430px) AND (max-width: 768px){
    .checkout-section .title{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    }
    
    .checkout-section label{
        color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
    }
    
    .checkout-section input[type="text"], input[type="number"], select, select option{
        height: 44px;
        border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    
    color: var(--Gray-500, #77878F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
    }
    
    .checkout-section textarea{
        /* display: flex; */
    width: 100%;
    height: 124px;
    /* padding: 12px 511px 92px 16px; */
    /* align-items: center; */
    /* align-self: stretch; */
    
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    
    .checkout-section .payment{
        display: flex;
    padding: 20px 0px 32px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .checkout-section .card-header{
        padding: 15px;
        border-radius: 4px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
    
        border-top: 0;
        border-left: 0;
        border-right: 0;
    
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    }
    
    .col-md-2-5{
        width: 20%;
    }
    
    .checkout-section .payment-option{
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 15px;
    }
    
    .checkout-section .payment-option .option .icon svg{
        width: 32px;
        height: 32px;
    }
    
    .checkout-section .payment-option .option .name{
        color: var(--Gray-900, #191C1F);
    text-align: center;
    
    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    padding-top: 10px;
    }
    
    .checkout-section .payment-option .option .form-check-input{
        width: 20px;
    height: 20px;
    border-radius: 100px;
    border: 1px solid var(--Gray-200, #C9CFD2);
    /* background: var(--Gray-00, #FFF); */
    margin-top: 10px;
    margin-bottom: 10px;
    }
    
    .checkout-section .hr-line{
        width: 100%;
        height: 1px;
        background: #E4E7E9;
    }
    
    .checkout-section .product{
        margin-bottom: 15px;
    }
    
    .checkout-section .product img{
        width: 64px;
    height: 64px;
    border-radius: 2px;
    }
    
    .checkout-section .product .name{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .checkout-section .product .qty{
        color: var(--Gray-600, #5F6C72);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; 
    }
    
    .checkout-section .product .price{
        color: var(--Secondary-500, #2DA5F3);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
    }
    
    .checkout-section .summery-text{
        color: var(--Gray-600, #5F6C72);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .checkout-section .summery-price{
        color: var(--Gray-900, #191C1F);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }
    
    .checkout-section .total-text{
        color: var(--Gray-900, #191C1F);
    
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }
    .checkout-section .total-price{
        color: var(--Gray-900, #191C1F);
    
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; 
    }
    
    .checkout-section .place-order-btn{
    border: none;
    outline: none;
    display: flex;
    /* width: 376px; */
    width: 100%;
    padding: 0px 15px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 3px;
    background: var(--Primary-500, #FA8232);
    }
    
    .checkout-section .place-order-btn .text{
        color: var(--Gray-00, #FFF);
    
    /* Heading/06 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 56px; /* 350% */
    letter-spacing: 0.192px;
    text-transform: uppercase;
    }
    
    .checkout-section .place-order-btn .icon svg{
        width: 24px;
    height: 24px;
    flex-shrink: 0;
    }
}
/************************************************Checkout Page Media Queries End*******************************************************/

/************************************************Shopping Card Page Media Queries******************************************************/
@media(min-width: 770px) AND (max-width: 1024px){
    
.shopping-card-section{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    padding: 62px 0px;
}

.shopping-card .quantity-div{
    display: flex;
/* width: 148px; */
width: 100%;
padding: 12px 20px;
justify-content: space-between;
align-items: center;
border-radius: 3px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.shopping-card .quantity-div .minus svg{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.shopping-card .quantity-div .qty-count input{
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
}

.shopping-card .quantity-div .qty-count input:focus{
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
}

.shopping-card .quantity-div .plus svg{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.shopping-card .hr-line{
    width: 100%;
height: 1px;
background: #E4E7E9;
}

.shopping-card .card-bottom{
    padding: 24px;
}

.shopping-card .card-bottom a{
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
border: 2px solid var(--Secondary-500, #2DA5F3);
}

.shopping-card .card-bottom a .text{
    color: var(--Secondary-500, #2DA5F3);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 45px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.shopping-card-section  .shopping-card .card-bottom a .icon svg{
    width: 20px;
height: 20px;
}

.summery .summery-hr-line{
    width: 100%;
height: 1px;
background: #E4E7E9;
}

.shopping-card-section .summery .title{
    color: var(--Gray-900, #191C1F);

    /* Body/Large/500 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 133.333% */
}

.shopping-card-section .summery .text{
    color: var(--Gray-600, #5F6C72);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.shopping-card-section .summery .price{
    color: var(--Gray-900, #191C1F);

    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.shopping-card-section .summery .total-text{
    color: var(--Gray-900, #191C1F);

    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.shopping-card-section .summery .total-price{
    color: var(--Gray-900, #191C1F);

    /* Body/Medium/600 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}

.shopping-card-section .process-to-checkout{
    display: flex;
width: 100%;
padding: 0px 10px;
justify-content: center;
align-items: center;
gap: 3px;
border-radius: 3px;
background: var(--Primary-500, #FA8232);
}

.shopping-card-section .process-to-checkout .text{
    color: var(--Gray-00, #FFF);

    /* Heading/06 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px; /* 350% */
    letter-spacing: 0.192px;
    text-transform: uppercase;
}

.shopping-card-section .process-to-checkout .icon svg{
    width: 24px;
height: 24px;
flex-shrink: 0;
}

.shopping-card-section .coupon .card-header{
    border: none;
    outline: none;
    display: flex;
padding: 20px 24px;
align-items: flex-start;
gap: 10px;
border: 1px solid var(--Gray-100, #E4E7E9);

    color: var(--Gray-900, #191C1F);

    /* Body/Large/500 */
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 133.333% */
}

.shopping-card-section .coupon-btn{
    border: none;
    outline: none;
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Secondary-500, #2DA5F3);

color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

}
@media(min-width: 300px) AND (max-width: 768px){
    
    .shopping-card-section{
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        padding: 62px 0px;
    }
    
    .shopping-card .quantity-div{
        display: flex;
    /* width: 148px; */
    width: 100%;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .shopping-card .quantity-div .minus svg{
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        cursor: pointer;
    }
    
    .shopping-card .quantity-div .qty-count input{
        width: 40px;
        text-align: center;
        border: none;
        outline: none;
    }
    
    .shopping-card .quantity-div .qty-count input:focus{
        width: 40px;
        text-align: center;
        border: none;
        outline: none;
    }
    
    .shopping-card .quantity-div .plus svg{
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        cursor: pointer;
    }
    
    .shopping-card .hr-line{
        width: 100%;
    height: 1px;
    background: #E4E7E9;
    }
    
    .shopping-card .card-bottom{
        padding: 24px;
    }
    
    .shopping-card .card-bottom a{
        display: flex;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
    border: 2px solid var(--Secondary-500, #2DA5F3);
    }
    
    .shopping-card .card-bottom a .text{
        color: var(--Secondary-500, #2DA5F3);
    
    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
    .shopping-card-section  .shopping-card .card-bottom a .icon svg{
        width: 20px;
    height: 20px;
    }
    
    .summery .summery-hr-line{
        width: 100%;
    height: 1px;
    background: #E4E7E9;
    }
    
    .shopping-card-section .summery .title{
        color: var(--Gray-900, #191C1F);
    
        /* Body/Large/500 */
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 133.333% */
    }
    
    .shopping-card-section .summery .text{
        color: var(--Gray-600, #5F6C72);
    
        /* Body/Small/400 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
    }
    
    .shopping-card-section .summery .price{
        color: var(--Gray-900, #191C1F);
    
        /* Body/Small/500 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 142.857% */
    }
    
    .shopping-card-section .summery .total-text{
        color: var(--Gray-900, #191C1F);
    
        /* Body/Medium/400 */
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 150% */
    }
    
    .shopping-card-section .summery .total-price{
        color: var(--Gray-900, #191C1F);
    
        /* Body/Medium/600 */
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 150% */
    }
    
    .shopping-card-section .process-to-checkout{
        display: flex;
    width: 100%;
    padding: 0px 5px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: 3px;
    background: var(--Primary-500, #FA8232);
    }
    
    .shopping-card-section .process-to-checkout .text{
        color: var(--Gray-00, #FFF);
    
        /* Heading/06 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 50px; /* 350% */
        letter-spacing: 0.192px;
        text-transform: uppercase;
    }
    
    .shopping-card-section .process-to-checkout .icon svg{
        width: 20px;
    height: 20px;
    flex-shrink: 0;
    }
    
    .shopping-card-section .coupon .card-header{
        border: none;
        outline: none;
        display: flex;
    padding: 15px 20px;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: #ffffff !important;
    
        color: var(--Gray-900, #191C1F);
    
        /* Body/Large/500 */
        font-family: "Public Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 133.333% */
    }
    
    .shopping-card-section .coupon-btn{
        border: none;
        outline: none;
        display: flex;
    padding: 0px 15px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
    background: var(--Secondary-500, #2DA5F3);
    
    color: var(--Gray-00, #FFF);
    
    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
    }
/**********************************************Shopping Card Page Media Queries End*****************************************************/

/***************************************************Wishlist Page Media Queries********************************************************/
@media(min-width: 770px) AND (max-width: 1024px){
    
.wishlist-page .card{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.wishlist-page .card .card-header{
    border:none;
    display: flex;
padding: 20px 24px;
align-items: flex-start;
gap: 10px;
background-color: #fff;

color: var(--Gray-900, #191C1F);

/* Body/Large/500 */
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
/* line-height: 24px;  */
}

.wishlist-page .card .heading-title{
    display: flex;
    width: 100%;
    height: 38px;
/* padding: 10px 24px; */
align-items: center;
/* gap: 24px; */
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-50, #F2F4F5);
}

.wishlist-page .card .heading-title .text{
    color: var(--Gray-700, #475156);

    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    text-transform: uppercase;
}

.wishlist-page .product{

}

.wishlist-page .product img{
    width: 72px;
height: 72px;
}

.wishlist-page .product .description{
    color: var(--Gray-700, #475156);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.wishlist-page .product .price .actual{
    color: var(--Gray-400, #929FA5);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
text-decoration-line: strikethrough;
}

.wishlist-page .product .price .current{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.wishlist-page .product .in-stock{
    color: var(--Success-500, #2DB224);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; 
}

.wishlist-page .product .out-of-stock{
    color: var(--Danger-500, #EE5858);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; 
}

.wishlist-page .product .add-to-card{
    display: flex;
padding: 0px 10px;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
}

.wishlist-page .product .add-to-card.grey{
    display: flex;
padding: 0px 10px;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: 2px;
background: var(--Gray-300, #ADB7BC);
}

.wishlist-page .product .add-to-card .text{
    color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.wishlist-page .product .add-to-card .icon svg{
    width: 20px;
    height: 20px;
}

.wishlist-page .product .remove-btn .icon svg{
    width: 24px;
    height: 24px;
}

}

@media(min-width: 430px) AND (max-width: 768px){
    
    .wishlist-page .card{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .wishlist-page .card .card-header{
        border:none;
        display: flex;
    padding: 20px 24px;
    align-items: flex-start;
    gap: 10px;
    background-color: #fff;
    
    color: var(--Gray-900, #191C1F);
    
    /* Body/Large/500 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    /* line-height: 24px;  */
    }
    
    .wishlist-page .card .heading-title{
        display: flex;
        width: 100%;
        height: 58px;
    /* padding: 10px 24px; */
    align-items: center;
    /* gap: 24px; */
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-50, #F2F4F5);
    }
    
    .wishlist-page .card .heading-title .text{
        color: var(--Gray-700, #475156);
    
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%;
        text-transform: uppercase;
    }
    
    .wishlist-page .product{
    
    }
    
    .wishlist-page .product img{
        width: 62px;
    height: 62px;
    }
    
    .wishlist-page .product .description{
        color: var(--Gray-700, #475156);
    
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .wishlist-page .product .price .actual{
        color: var(--Gray-400, #929FA5);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    text-decoration-line: strikethrough;
    }
    
    .wishlist-page .product .price .current{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }
    
    .wishlist-page .product .in-stock{
        color: var(--Success-500, #2DB224);
    
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; 
    }
    
    .wishlist-page .product .out-of-stock{
        color: var(--Danger-500, #EE5858);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; 
    }
    
    .wishlist-page .product .add-to-card{
        display: flex;
    padding: 0px 2px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    }
    
    .wishlist-page .product .add-to-card.grey{
        display: flex;
    padding: 0px 2px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 2px;
    background: var(--Gray-300, #ADB7BC);
    }
    
    .wishlist-page .product .add-to-card .text{
        color: var(--Gray-00, #FFF);
    
    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
    .wishlist-page .product .add-to-card .icon svg{
        width: 18px;
        height: 18px;
    }
    
    .wishlist-page .product .remove-btn .icon svg{
        width: 22px;
        height: 22px;
    }
    
}

@media(min-width: 300px) AND (max-width: 425px){
    
    .wishlist-page .card{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .wishlist-page .card .card-header{
        border:none;
        display: flex;
    padding: 20px 24px;
    align-items: flex-start;
    gap: 10px;
    background-color: #fff;
    
    color: var(--Gray-900, #191C1F);
    
    /* Body/Large/500 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    /* line-height: 24px;  */
    }
    
    .wishlist-page .card .heading-title{
        display: flex;
        width: 100%;
        height: 100px;
    /* padding: 10px 24px; */
    align-items: center;
    /* gap: 24px; */
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-50, #F2F4F5);
    }
    
    .wishlist-page .card .heading-title .text{
        color: var(--Gray-700, #475156);
    
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%;
        text-transform: uppercase;
    }
    
    .wishlist-page .product{
        border-bottom: 1.5px solid var(--Gray-100, #E4E7E9);
    }
    
    .wishlist-page .product img{
        width: 62px;
    height: 62px;
    }
    
    .wishlist-page .product .description{
        color: var(--Gray-700, #475156);
    
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .wishlist-page .product .price .actual{
        color: var(--Gray-400, #929FA5);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    text-decoration-line: strikethrough;
    }
    
    .wishlist-page .product .price .current{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }
    
    .wishlist-page .product .in-stock{
        color: var(--Success-500, #2DB224);
    
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; 
        padding-bottom: 5px;
    }
    
    .wishlist-page .product .out-of-stock{
        color: var(--Danger-500, #EE5858);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    padding-bottom: 5px; 
    }
    
    .wishlist-page .product .add-to-card{
        display: flex;
    padding: 0px 2px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    margin-top: 10px;
    }
    
    .wishlist-page .product .add-to-card.grey{
        display: flex;
    padding: 0px 2px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 2px;
    background: var(--Gray-300, #ADB7BC);
    margin-top: 10px;
    }
    
    .wishlist-page .product .add-to-card .text{
        color: var(--Gray-00, #FFF);
    
    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 35px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
    .wishlist-page .product .add-to-card .icon svg{
        width: 18px;
        height: 18px;
    }
    
    .wishlist-page .product .remove-btn .icon svg{
        width: 22px;
        height: 22px;
    }
    
}

/*************************************************Wishlist Page Media Queries End******************************************************/

/* *************************************************Compare Page Media Queries***********************************************************/
@media(min-width: 770px) AND (max-width: 1024px){
    .compare-section .compare{
        /* width: 1320px; */
        width: 100%;
    /* height: 896px; */
    height: 100%;
        border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .compare-section  .product-feature{
        padding: 15px;
    }
    
    .compare-section  .custom-border-end{
        width: 1px;
    height: 100%;
    background: #E4E7E9;
    }
    
    .compare-section  .product-feature .close-icon svg{
        width: 24px;
    height: 24px;
    }
    
    .compare-section  .product-feature img{
        width: 100%;
    height: 272px;
    }
    
    .compare-section  .product-feature .name{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    }
    
    .compare-section  .product-feature .add-to-cart{
    border: none;
    outline: none;
    display: flex;
    /* width: 212px; */
    width: 100%;
    padding: 0px 10px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    }
    
    .compare-section  .product-feature .add-to-cart.grey{
        border: none;
        outline: none;
        display: flex;
        /* width: 212px; */
        width: 100%;
        padding: 0px 10px;
        justify-content: center;
        align-items: center;
        gap: 3px;
        border-radius: 2px;
        background: var(--Gray-300, #ADB7BC);
    }
    
    .compare-section  .product-feature .add-to-cart .text{
        color: var(--Gray-00, #FFF);
    
    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
    /* margin-top: 3px; */
    }
    
    .compare-section .product-feature .add-to-cart .icon{
        margin-bottom: 5px;
    }
    
    .compare-section .product-feature .add-to-cart .icon svg{
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    
    .compare-section .product-feature .wishlist-div{
        display: flex;
    padding: 12px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 2px;
    border: 1.5px solid var(--Primary-100, #FFE7D6);
    }
    
    .compare-section .product-feature .wishlist-div.grey{
        display: flex;
    padding: 12px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 2px;
    border: 1.5px solid var(--Gray-100, #E4E7E9);
    }
    
    .compare-section .div-grey{
        background: var(--Gray-50, #F2F4F5);
    }
    
    .compare-section .div-grey-padding{
        display: flex;
        padding: 11px 15px;
        justify-content: start;
        align-items: center;
        gap: 8px;
    }
    
    .compare-section .rating-review .rating svg{
        width: 18px;
        height: 18px;
    }
    
    .compare-section .rating-review .review{
        color: var(--Gray-500, #77878F);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
    padding-top: 5px;
    }
    
    .compare-section .div-white{
        background-color: #fff;
    }
    
    .compare-section .price{
        color: var(--Secondary-500, #2DA5F3);
    
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; 
    }
    
    .compare-section .common-text{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .compare-section .in-stock{
        color: var(--Success-500, #2DB224);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    }
    
    .compare-section .out-of-stock{
        color: var(--Danger-500, #EE5858);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
    }
}

@media(min-width: 430px) AND (max-width: 768px){
    .compare-section .compare{
        /* width: 1320px; */
        width: 100%;
    /* height: 896px; */
    height: 100%;
        border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .compare-section  .product-feature{
        padding: 12px;
    }
    
    .compare-section  .custom-border-end{
        width: 1px;
    height: 100%;
    background: #E4E7E9;
    }
    
    .compare-section  .product-feature .close-icon svg{
        width: 24px;
    height: 24px;
    }
    
    .compare-section  .product-feature img{
        width: 100%;
    height: 242px;
    }
    
    .compare-section  .product-feature .name{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    }
    
    .compare-section  .product-feature .add-to-cart{
    border: none;
    outline: none;
    display: flex;
    /* width: 212px; */
    width: 100%;
    padding: 0px 5px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    }
    
    .compare-section  .product-feature .add-to-cart.grey{
        border: none;
        outline: none;
        display: flex;
        /* width: 212px; */
        width: 100%;
        padding: 0px 5px;
        justify-content: center;
        align-items: center;
        gap: 2px;
        border-radius: 2px;
        background: var(--Gray-300, #ADB7BC);
    }
    
    .compare-section  .product-feature .add-to-cart .text{
        color: var(--Gray-00, #FFF);
    
    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
    /* margin-top: 3px; */
    }
    
    .compare-section .product-feature .add-to-cart .icon{
        margin-bottom: 5px;
    }
    
    .compare-section .product-feature .add-to-cart .icon svg{
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    
    .compare-section .product-feature .wishlist-div{
        display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 2px;
    border: 1.5px solid var(--Primary-100, #FFE7D6);
    }
    
    .compare-section .product-feature .wishlist-div.grey{
        display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 2px;
    border: 1.5px solid var(--Gray-100, #E4E7E9);
    }
    
    .compare-section .div-grey{
        background: var(--Gray-50, #F2F4F5);
    }
    
    .compare-section .div-grey-padding{
        display: flex;
        padding: 11px 12px;
        justify-content: start;
        align-items: center;
        gap: 6px;
    }
    
    .compare-section .rating-review .rating svg{
        width: 14px;
        height: 14px;
    }
    
    .compare-section .rating-review .review{
        color: var(--Gray-500, #77878F);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
    padding-top: 5px;
    }
    
    .compare-section .div-white{
        background-color: #fff;
    }
    
    .compare-section .price{
        color: var(--Secondary-500, #2DA5F3);
    
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; 
    }
    
    .compare-section .common-text{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .compare-section .in-stock{
        color: var(--Success-500, #2DB224);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    }
    
    .compare-section .out-of-stock{
        color: var(--Danger-500, #EE5858);
    
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
    }
}
/* *************************************************Compare Page Media Queries End********************************************************/


/** Here responsive are not done **/
/***************************************************Track Order Details Page Media Queries***********************************************/
@media(min-width: 670px) AND (max-width: 770px){
    .track-order-details-section .container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* gap: 20px; */
    }
    
    .track-order-details{
    display: flex;
    /* padding: 72px 468px; */
    margin: 72px 0px;
    /* padding: 20px; */
    width: 724px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .track-order-details .tracking-process{
        padding: 20px;
    }
    
    .track-order-details .order-details{
        /* display: flex; */
    width: 676px;
    padding: 24px;
    /* justify-content: space-between; */
    /* align-items: center; */
    border-radius: 4px;
    border: 1px solid var(--Warning-200, #F7E99E);
    background: var(--Warning-50, #FDFAE7);
    }
    
    .track-order-details .order-details .text{
        color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .track-order-details .order-details .price{
        color: var(--Secondary-500, #2DA5F3);
    
    font-family: "Public Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; 
    }
    
    .track-order-details .order-date{
        padding: 10px 0px;
    }
    
    .track-order-details .order-date .text{
        color: var(--Gray-700, #475156);
    
    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    }
    
    .track-order-details .order-date .date{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    }
    
    .order-tracking{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0px;
    }
    
    .order-tracking-status{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0px;
    }
    
    .process-line{
    position: relative;
    width: 530px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 100px;
    background: var(--Primary-100, #FFE7D6);
    }
    
    .order-tracking-status .process-line-status{
        width: 620px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .order-tracking-status .process-line-status .order-placed-text-icon{
        padding-left: 10px;
    }
    
    /* .order-tracking-status .process-line-status .packaging-text-icon{
        padding-left: 15px;
    }
    
    .order-tracking-status .process-line-status .on-the-road-text-icon {
        padding-left: 15px;
    }
    
    .order-tracking-status .process-line-status  .delivered-text-icon{
        padding-left: 15px;
    } */
    
    
    .process-line .order-placed{
        position: absolute;
        top: -100%;
        left: -1%;
        z-index: 100;
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--Primary-500, #FA8232);
    }
    
    .process-line .order-placed svg{
        width: 12px;
        height: 12px;
    }
    
    .process-line .progress-complete-line{
        position: absolute;
    top: -10%;
    left: 12px;
        width: 167px;
        height: 8px;
        flex-shrink: 0;
        border-radius: 100px;
    background: var(--Primary-500, #FA8232);
    }
    
    .process-line .packaging{
    position: absolute;
    top: -100%;
    left: 177px;
    z-index: 100;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--Primary-500, #FA8232);
    border-radius: 50%;
    stroke-width: 2px;
    stroke: var(--Gray-00, #FFF);
    }
    
    .process-line .on-the-road{
        position: absolute;
    top: -100%;
    left: 353px;
    z-index: 100;
        width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--Gray-00, #FFF);
    border-radius: 50%;
    outline: 2px solid var(--Primary-500, #FA8232);
    }
    
    .process-line .delivered{
        position: absolute;
    top: -100%;
    left: 530px;
    z-index: 100;
        width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--Gray-00, #FFF);
    border-radius: 50%;
    outline: 2px solid var(--Primary-500, #FA8232);
    }
    
    .track-order-details .hr-line{
        display: flex;
    width: 100%;
    height: 2px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .track-order-details .order-activity{
        padding: 24px;
    }
    
    .track-order-details .order-activity .title{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    }
    
    .track-order-details .order-activity .success-div-icon{
        display: flex;
        padding: 12px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
    border: 1px solid var(--Success-100, #D5F0D3);
    background: var(--Success-50, #EAF7E9);
    }
    
    .track-order-details .order-activity .secondary-div-icon{
        display: flex;
        padding: 12px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
    border: 1px solid var(--Secondary-100, #D5EDFD);
    background: var(--Secondary-50, #EAF6FE);
    }
    
    .track-order-details .order-activity .activity svg{
        width: 24px;
    height: 24px;
    }
    
    .track-order-details .order-activity .activity .text{
        color: var(--Gray-900, #191C1F);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .track-order-details .order-activity .activity .date{
        color: var(--Gray-500, #77878F);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
}

@media(min-width: 430px) AND (max-width: 670px){
    .track-order-details-section .container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* gap: 20px; */
    }
    
    .track-order-details{
    display: flex;
    /* padding: 72px 468px; */
    margin: 72px 0px;
    /* padding: 20px; */
    width: 450px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .track-order-details .tracking-process{
        padding: 20px;
    }
    
    .track-order-details .order-details{
        /* display: flex; */
    width: 400px;
    padding: 24px;
    /* justify-content: space-between; */
    /* align-items: center; */
    border-radius: 4px;
    border: 1px solid var(--Warning-200, #F7E99E);
    background: var(--Warning-50, #FDFAE7);
    }
    
    .track-order-details .order-details .text{
        color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .track-order-details .order-details .price{
        color: var(--Secondary-500, #2DA5F3);
    
    font-family: "Public Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; 
    }
    
    .track-order-details .order-date{
        padding: 10px 0px;
    }
    
    .track-order-details .order-date .text{
        color: var(--Gray-700, #475156);
    
    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    }
    
    .track-order-details .order-date .date{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    }
    
    .order-tracking{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0px;
    }
    
    .order-tracking-status{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0px;
    }
    
    .process-line{
    position: relative;
    width: 300px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 100px;
    background: var(--Primary-100, #FFE7D6);
    }
    
    .order-tracking-status .process-line-status{
        width: 300px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .order-tracking-status .process-line-status .order-placed-text-icon{
        padding-left: 10px;
    }
    
    /* .order-tracking-status .process-line-status .packaging-text-icon{
        padding-left: 15px;
    }
    
    .order-tracking-status .process-line-status .on-the-road-text-icon {
        padding-left: 15px;
    }
    
    .order-tracking-status .process-line-status  .delivered-text-icon{
        padding-left: 15px;
    } */
    
    
    .process-line .order-placed{
        position: absolute;
        top: -100%;
        left: -1%;
        z-index: 100;
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--Primary-500, #FA8232);
    }
    
    .process-line .order-placed svg{
        width: 12px;
        height: 12px;
    }
    
    .process-line .progress-complete-line{
        position: absolute;
    top: -10%;
    left: 12px;
        width: 100px;
        height: 8px;
        flex-shrink: 0;
        border-radius: 100px;
    background: var(--Primary-500, #FA8232);
    }
    
    .process-line .packaging{
    position: absolute;
    top: -100%;
    left: 100px;
    z-index: 100;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--Primary-500, #FA8232);
    border-radius: 50%;
    stroke-width: 2px;
    stroke: var(--Gray-00, #FFF);
    }
    
    .process-line .on-the-road{
        position: absolute;
    top: -100%;
    left: 200px;
    z-index: 100;
        width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--Gray-00, #FFF);
    border-radius: 50%;
    outline: 2px solid var(--Primary-500, #FA8232);
    }
    
    .process-line .delivered{
        position: absolute;
    top: -100%;
    left: 300px;
    z-index: 100;
        width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--Gray-00, #FFF);
    border-radius: 50%;
    outline: 2px solid var(--Primary-500, #FA8232);
    }
    
    .track-order-details .hr-line{
        display: flex;
    width: 100%;
    height: 2px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .track-order-details .order-activity{
        padding: 24px;
    }
    
    .track-order-details .order-activity .title{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    }
    
    .track-order-details .order-activity .success-div-icon{
        display: flex;
        padding: 12px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
    border: 1px solid var(--Success-100, #D5F0D3);
    background: var(--Success-50, #EAF7E9);
    }
    
    .track-order-details .order-activity .secondary-div-icon{
        display: flex;
        padding: 12px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
    border: 1px solid var(--Secondary-100, #D5EDFD);
    background: var(--Secondary-50, #EAF6FE);
    }
    
    .track-order-details .order-activity .activity svg{
        width: 24px;
    height: 24px;
    }
    
    .track-order-details .order-activity .activity .text{
        color: var(--Gray-900, #191C1F);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .track-order-details .order-activity .activity .date{
        color: var(--Gray-500, #77878F);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
}

@media(min-width: 300px) AND (max-width: 425px){
    .track-order-details-section .container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* gap: 20px; */
    }
    
    .track-order-details{
    display: flex;
    /* padding: 72px 468px; */
    margin: 72px 0px;
    /* padding: 20px; */
    width: 400px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .track-order-details .tracking-process{
        padding: 20px;
    }
    
    .track-order-details .order-details{
        /* display: flex; */
    width: 300px;
    padding: 24px;
    /* justify-content: space-between; */
    /* align-items: center; */
    border-radius: 4px;
    border: 1px solid var(--Warning-200, #F7E99E);
    background: var(--Warning-50, #FDFAE7);
    }
    
    .track-order-details .order-details .text{
        color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .track-order-details .order-details .price{
        color: var(--Secondary-500, #2DA5F3);
    
    font-family: "Public Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; 
    }
    
    .track-order-details .order-date{
        padding: 10px 0px;
    }
    
    .track-order-details .order-date .text{
        color: var(--Gray-700, #475156);
    
    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    }
    
    .track-order-details .order-date .date{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    }
    
    .order-tracking{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0px;
    }
    
    .order-tracking-status{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0px;
    }
    
    .process-line{
    position: relative;
    width: 250px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 100px;
    background: var(--Primary-100, #FFE7D6);
    }
    
    .order-tracking-status .process-line-status{
        width: 290px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .order-tracking-status .process-line-status .order-placed-text-icon{
        padding-left: 10px;
    }
    
    /* .order-tracking-status .process-line-status .packaging-text-icon{
        padding-left: 15px;
    }
    
    .order-tracking-status .process-line-status .on-the-road-text-icon {
        padding-left: 15px;
    }
    
    .order-tracking-status .process-line-status  .delivered-text-icon{
        padding-left: 15px;
    } */
    
    
    .process-line .order-placed{
        position: absolute;
        top: -100%;
        left: -1%;
        z-index: 100;
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--Primary-500, #FA8232);
    }
    
    .process-line .order-placed svg{
        width: 12px;
        height: 12px;
    }
    
    .process-line .progress-complete-line{
        position: absolute;
    top: -10%;
    left: 12px;
        width: 96px;
        height: 8px;
        flex-shrink: 0;
        border-radius: 100px;
    background: var(--Primary-500, #FA8232);
    }
    
    .process-line .packaging{
    position: absolute;
    top: -100%;
    left: 96px;
    z-index: 100;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--Primary-500, #FA8232);
    border-radius: 50%;
    stroke-width: 2px;
    stroke: var(--Gray-00, #FFF);
    }
    
    .process-line .on-the-road{
        position: absolute;
    top: -100%;
    left: 192px;
    z-index: 100;
        width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--Gray-00, #FFF);
    border-radius: 50%;
    outline: 2px solid var(--Primary-500, #FA8232);
    }
    
    .process-line .delivered{
        position: absolute;
    top: -100%;
    left: 290px;
    z-index: 100;
        width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--Gray-00, #FFF);
    border-radius: 50%;
    outline: 2px solid var(--Primary-500, #FA8232);
    }
    
    .track-order-details .hr-line{
        display: flex;
    width: 100%;
    height: 2px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .track-order-details .order-activity{
        padding: 24px;
    }
    
    .track-order-details .order-activity .title{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    }
    
    .track-order-details .order-activity .success-div-icon{
        display: flex;
        padding: 12px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
    border: 1px solid var(--Success-100, #D5F0D3);
    background: var(--Success-50, #EAF7E9);
    }
    
    .track-order-details .order-activity .secondary-div-icon{
        display: flex;
        padding: 12px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
    border: 1px solid var(--Secondary-100, #D5EDFD);
    background: var(--Secondary-50, #EAF6FE);
    }
    
    .track-order-details .order-activity .activity svg{
        width: 24px;
    height: 24px;
    }
    
    .track-order-details .order-activity .activity .text{
        color: var(--Gray-900, #191C1F);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .track-order-details .order-activity .activity .date{
        color: var(--Gray-500, #77878F);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
}
/*************************************************Track Order Details Page Media Queries End*********************************************/

/*****************************************************Track Order Page Media Queries****************************************************/
@media(min-width: 300px) AND (max-width: 770px){
    .track-order-section{
        background-color: #FFFFFF;
        width: 100%;
        height: 100%;
        padding: 40px 0px;
    }
    
    .track-order-section .track-order-page{
        display: flex;
    padding-right:  100px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    }
    
    .track-order-page .title{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    }
    
    .track-order-page .description{
        color: var(--Gray-600, #5F6C72);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    }
    
    .track-order-page label{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    }
    
    .track-order-page input[type="text"].form-control{
        display: flex;
        height: 40px;
        /* padding: 12px 383px 12px 16px; */
        align-items: center;
        align-self: stretch;
        border-radius: 2px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
        font-size: 12px;
    }
    
    /* .track-order-page .form-control:focus{
        border: none;
        outline: none;
        outline: 2px solid  var(--Primary-500, #FA8232);
    } */
    
    .track-order-page .order-id-message {
        padding-top: 2px; 
    }
    
    .track-order-page .order-id-message .icon svg{
        width: 22px;
    height: 22px;
    } 
    
    .track-order-page .order-id-message .text{
        color: var(--Gray-600, #5F6C72);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .track-order-page .track-order-submit-btn{
        border:none;
        outline: none;
        display: flex;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    background: var(--Primary-500, #FA8232);
    margin-top: 10px;
    }
    
    .track-order-page .track-order-submit-btn .text{
        color: var(--Gray-00, #FFF);
    
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 45px;
    letter-spacing: 0.192px;
    text-transform: uppercase;
    }
    
    .track-order-page .track-order-submit-btn .icon svg{
        width: 22px;
    height: 22px;
    }
}

/*************************************************** FAQ Page **************************************************************************/
.faq-section{
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    padding: 40px 0px;
}

.faq .question-div{
    display: flex;
/* padding-bottom: 24px; */
flex-direction: column;
justify-content: center;
align-items: center;
/* gap: 24px; */
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);

/* Dropdown Shadow */
/* box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12); */
}

.faq .question-div .question{
    display: flex;
    width: 100%;
padding: 15px;
justify-content: space-between;
align-items: center;
gap: 36px;
border-radius: 4px;
border-bottom: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
/* border-top: none;
border-left: none;
border-right: none; */
}

.faq .question-div .question.active{
display: flex;
width: 100%;
padding: 15px;
justify-content: space-between;
align-items: center;
gap: 36px;
border-radius: 4px 4px 0px 0px;
background: var(--Primary-500, #FA8232);

}

.faq .question.active .text{
    color: var(--Gray-00, #FFF);

    /* Body/Large/600 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 133.333% */
}

/* .faq .question{
    display: flex;
    width: 100%;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
    gap: 36px;
    border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
} */

.faq .question .text{
    color: var(--Gray-900, #191C1F);

    /* Body/Large/500 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 133.333% */
}

.faq .question .icon svg{
    width: 20px;
    height: 20px;
}

.faq .answer{
    /* display: flex; */
padding: 24px;
/* flex-direction: column; */
/* justify-content: center; */
/* align-items: center; */
/* gap: 24px; */
border-radius: 4px;
background: var(--Gray-00, #FFF);
box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
}

.faq .ask-for-support{
    display: flex;
padding: 32px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
border-radius: 4px;
background: var(--Warning-100, #FBF4CE);
}


.faq .ask-for-support .support-title{
    color: var(--Gray-900, #191C1F);

/* Body/Large/500 */
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 133.333% */
}

.faq .ask-for-support .description{
    color: var(--Gray-700, #475156);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.faq .ask-for-support input{
    display: flex;
width: 100%;
height: 44px;
/* padding: 12px 252px 12px 16px; */
align-items: start;
border-radius: 2px;
border: 1px solid var(--Warning-200, #F7E99E);
background: var(--Gray-00, #FFF);
}

.faq .ask-for-support textarea{
    display: flex;
    width: 100%;
    height: 88px;
    /* padding: 12px 218px 56px 16px; */
    align-items: start;

    border-radius: 2px;
border: 1px solid var(--Warning-200, #F7E99E);
background: var(--Gray-00, #FFF);
}

.faq .ask-for-support .send-message{
    border: none;
    outline: none;
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
margin-top: 10px;
}

.faq .ask-for-support .send-message .text{
    color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.faq .ask-for-support .send-message .icon svg{
    width: 20px;
    height: 20px;
}

/************************************************** FAQ Page End************************************************************************/

/*************************************************About Us Page **********************************************************************/
.about-us-section{
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    padding: 40px 0px;
}

.about-us-section .who-we-are a{
    display: inline-flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 2px;
background: var(--Secondary-500, #2DA5F3);

color: var(--Gray-00, #FFF);

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
margin-bottom: 10px;
}

.about-us-section .who-we-are .title{
    color: var(--Gray-900, #191C1F);

/* Display/04 */
font-family: "Public Sans";
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 48px; /* 120% */
}

.about-us-section .who-we-are .description{
    color: var(--Gray-700, #475156);

    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.about-us-section .who-we-are svg{
    width: 24px;
height: 24px;
}

.about-us-section .who-we-are span{
    color: var(--Gray-900, #191C1F);

    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.about-us-section .who-we-are img{
    /* width: 648px; */
    width: 100%;
height: 400px;
border-radius: 4px;
object-fit: cover;
}

.about-us-section  .core-team-member .card.profile{
    
border-radius: 3px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.about-us-section  .core-team-member .profile img{
    width: 64px;
height: 64px;
border-radius: 50%;
/* object-fit: cover; */
}

.about-us-section  .core-team-member .profile .name{
    color: var(--Gray-900, #191C1F);

    /* Body/Medium/600 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}

.about-us-section .banner{
    padding: 40px 0px;
}

.about-us-section .banner img{
    width: 100%;
    height: 440px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.00) 67.86%), url(<path-to-image>) lightgray 50% / cover no-repeat;
    object-fit: cover;
}

.about-us-section .banner .title{
    color: var(--Gray-900, #191C1F);

    /* Heading/01 */
    font-family: "Public Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 125% */
}

.about-us-section .banner .description{
    color: var(--Gray-900, #191C1F);

    /* Body/Large/400 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
}

.about-us-section .banner .play{
    display: inline-flex;
padding: 20px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
background: var(--Primary-500, #FA8232);
}

.about-us-section .banner .text-bg-dark {
    /* color:#fff!important; */
    /* background-color:RGBA(var(--bs-dark-rgb),var(--bs-bg-opacity,1))!important; */
}

.about-us-section .banner .card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--bs-card-img-overlay-padding);
    /* border-radius:var(--bs-card-inner-border-radius); */
}

/*************************************************About Us Page End**********************************************************************/


/*************************************************Customer Support Page Start************************************************************/

.how-can-help-section{
    width: 100%;
    height: 100%;
    background: #FFF;
    box-shadow: 0px -1px 0px 0px #E4E7E9 inset;
    /* padding: 20px 0px; */
}

.how-can-help-section .help-center{
    display: inline-flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 2px;
background: var(--Warning-400, #EFD33D);

color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
margin-bottom: 10px;
}

.how-can-help-section .title{
    color: var(--Gray-900, #191C1F);

/* Heading/01 */
font-family: "Public Sans";
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 40px; /* 125% */
margin-bottom: 15px;
}

.how-can-help-section .search{
    width: 100%;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
height: 65px;
/* padding: 12px 114px 12px 12px; */
padding: 12px;
gap: 12px;
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.how-can-help-section .icon{
    width: 7%;
}
.how-can-help-section .icon svg{
    width: 24px;
height: 24px;
}

.how-can-help-section .search-box {
    width: 70%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.how-can-help-section .search-box input[type="text"]{
    display: flex;
width: 100%;
height: 100%;
/* padding: 12px 114px 12px 12px; */
align-items: center;
border-radius: 4px;
border: none;
background: var(--Gray-00, #FFF);
outline: none;

color: var(--Gray-500, #77878F);

/* Body/Medium/400 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}

.how-can-help-section .submit-btn{
    border: none;
    outline: none;
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);

color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.how-can-help-section img{
    width: 100%;
    height: 400px;
    /* object-fit: cover; */
}

.we-assist-section{
width: 100%;
height: 100%;
background: var(--Gray-00, #FFF);
padding: 20px 0px;
}

.we-assist-section .heading{
    color: var(--Gray-900, #191C1F);
text-align: center;

/* Heading/01 */
font-family: "Public Sans";
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 40px; /* 125% */
}

.we-assist-section .card{
/* padding: 24px; */
border-radius: 4px;
border: 2px solid var(--Primary-100, #FFE7D6);
background: var(--Gray-00, #FFF);
}

.we-assist-section .card .icon svg{
    width: 32px;
height: 32px;
transition: all 0.3s ease-in-out;
}

.we-assist-section .card:hover{
    border-radius: 4px;
border: 2px solid var(--Primary-500, #FA8232);
background: var(--Gray-00, #FFF);
box-shadow: 0px 8px 40px 0px rgba(250, 130, 50, 0.12);
}

.we-assist-section .card .text{
    color: var(--Gray-900, #191C1F);

/* Body/Medium/500 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}

.popular-topics-section{
    width: 100%;
    height: 100%;
    background: var(--Gray-00, #FFF);
    padding: 40px 0px;
}

.popular-topics-section .popular-topics .point:hover{
    color: var(--Primary-500, #FA8232);

    /* Body/Medium/600 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.popular-topics-section .popular-topics .point:hover span{
    color: var(--Primary-500, #FA8232);

    /* Body/Medium/600 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.popular-topics-section .popular-topics .point span{
color: var(--Gray-900, #191C1F);

/* Body/Medium/400 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}

.contact-with-us-section{
    display: flex;
padding: 72px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
background: var(--Gray-50, #F2F4F5);
}

.contact-with-us-section .contact-with-us .card{
    border: none;
    display: flex;
/* padding: 32px; */
align-items: flex-start;
gap: 24px;
border-radius: 4px;
background: var(--Gray-00, #FFF);
box-shadow: 0px 24px 32px 0px rgba(25, 28, 31, 0.08);
}

.contact-with-us-section .contact-with-us .chat-icon-div{
    display: flex;
padding: 16px 24px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 4px;
background: var(--Success-50, #EAF7E9);
}

.contact-with-us-section .contact-with-us .phone-contact .phone-icon-div{
    display: flex;
    padding: 16px 24px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 4px;
background: var(--Secondary-50, #EAF6FE);
}

.contact-with-us-section .contact-with-us .number{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 32px; 
/* padding: 20px 0px; */
}

.contact-with-us-section .contact-with-us .call-now{
    display: inline-flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Secondary-500, #2DA5F3);
}

.contact-with-us-section .contact-with-us .call-now .text{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.contact-with-us-section .contact-with-us .call-now .icon svg{
    width: 20px;
height: 20px;
}

.contact-with-us-section .contact-with-us .contact-us-btn{
    display: inline-flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Success-500, #2DB224);
}

.contact-with-us-section .contact-with-us .contact-us-btn .text{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.contact-with-us-section .contact-with-us .phone-contact .phone-icon-div svg{
    width: 48px;
height: 48px;
}

.contact-with-us-section .contact-with-us .title{
    color: var(--Gray-900, #191C1F);

/* Body/Large/600 */
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
}

.contact-with-us-section .contact-with-us .description{
    color: var(--Gray-600, #5F6C72);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}


/*************************************************Customer Support Page End**************************************************************/

/***todo:************************************************Blog Page Section CSS Start******************************************************/

.blog-page-section{
    background: #FFF;
}

.blog-page{
    padding: 30px 0px;
}

.blog-page .sidebar .card{
    border: none;
    display: flex;
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.blog-page .sidebar img{
    width: 100%;
height: 80px;
border-radius: 2px;
}

/* .blog-page .sidebar .card:hover img{
    width: 100%;
height: 80px;
border-radius: 2px;
} */

.blog-page .sidebar .blog-title{
    color: var(--Gray-900, #191C1F);

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

.blog-page .sidebar .blog-date{
    color: var(--Gray-500, #77878F);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.blog-page .sidebar .gallery img{
    width: 80px;
height: 80px;
flex-shrink: 0;
border-radius: 2px;
}

.blog-page .title{
    color: var(--Gray-900, #191C1F);

    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: uppercase;
}

.blog-page  label{
color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 20px;
padding-left: 5px;
}

.blog-page .category label.active{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding-left: 3px;
}

.blog-page input[type="radio"]{
    width: 18px;
    height: 18px;
    /* border-radius: 100px;
    border: 1px solid var(--Gray-200, #C9CFD2);
    background: var(--Gray-00, #FFF);
} */
}

.blog-page .form-check-input:focus {
    outline: none;
    border:none;
}


.blog-page .form-check-input:checked {
    outline: none;
    background-color: var(--Primary-500, #FA8232);
    border-color: var(--Primary-500, #FA8232);
}

.blog-page .blog-page-sidebar .hr-line{
/* width: 312px; */
width: 100%;
height: 1px;
background: #E4E7E9;
margin: 20px 0px; 
}

.blog-page input[type="checkbox"]{
width: 20px;
height: 20px;
border-radius: 2px;
/* border: 1px solid var(--Gray-200, #C9CFD2);
background: var(--Gray-00, #FFF); */
}

.blog-page .popular-tag-div{
    margin-bottom: 20px;
}

.blog-page .popular-tag .tag{
display: inline-flex;
flex-wrap: wrap;
padding: 6px 12px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
margin-bottom: 10px;

color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
transition: all 0.3s ease-in-out;
}

.blog-page .popular-tag .tag:hover{
border: 1px solid var(--Primary-500, #FA8232);
background: var(--Primary-50, #FFF3EB);

color: var(--Primary-500, #FA8232);

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

.sidebar-btn{
    border:none;
    outline:none;
    display: flex;
    width: 100%;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 5px;
    background: var(--Primary-500, #1B6392);
    margin: 10px 0;

color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.sidebar-btn svg{
    height: 22px;
    width: 22px;
    color: white;
}

.blog-page-search{
display: flex;
width: 100%;
height: 44px;
/* padding: 12px 16px; */
justify-content: start;
align-items: center;
/* gap: 8px; */
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.blog-page-search .search-box {
    width: 93%;
    height: 100%;
    padding:  0 10px;
}

.blog-page-search .search-box input[type="text"]{
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: "Public Sans";
    font-weight: 400;
    line-height: 20px;
    text-align: start;
}

.blog-page-search .filter select{
display: flex;
width: 180px;
height: 44px;
padding: 12px 16px;
justify-content: center;
align-items: center;
gap: 45px;
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.blog-page .active-filter{
    display: flex;
    flex-wrap: wrap;
/* width: 984px; */
width: 100%;
padding: 12px 24px;
justify-content: space-between;
align-items: center;
border-radius: 4px;
background: var(--Gray-50, #F2F4F5);
margin: 20px 0;
/* margin-left: 10px; */
/* margin-right: 10px; */
}

.blog-page .active-filters-text{
    color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.blog-page .show-filters .name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.blog-page .show-filters .close-icon{
    width: 14px;
    height: 14px;
}

.blog-page .search-found .found-count{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 20px;
}

.blog-page .search-found .text{
    color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}



.blog-page-pagination{
    padding: 30px 0px;
}

.blog-page-pagination .pagination{
    display: flex;
    padding: 10px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.blog-page-pagination .pagination .prev{
    display: flex;
    padding: 8px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 100px;
    border: 1.5px solid var(--Primary-500, #FA8232);
}

.blog-page-pagination .pagination .next{
    display: flex;
    padding: 8px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 100px;
    border: 1.5px solid var(--Primary-500, #FA8232);
}

.blog-page-pagination .pagination .prev svg{
    width: 24px;
    height: 24px;
}

.blog-page-pagination .pagination .next svg{
    width: 24px;
    height: 24px;
}

.blog-page-pagination .pagination .page{
    display: flex;
/* padding: 8px; */
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
border: 1.5px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);

color: var(--Gray-900, #191C1F);
text-align: center;
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
transition: 0.3 all ease-in-out;
}

.blog-page-pagination .pagination .page:hover{
    background: var(--Primary-500, #FA8232);
    color: var(--Gray-00, #FFF);
}

/********************************************************Blog Details Section CSS Start**************************************************/

.blog-details-section{
    background: #FFF;
    width: 100%;
    height: 100%;
    padding: 40px 0px;
}

.blog-details-section .main-image{
    width: 100%;
    height: 500px;
    border-radius: 3px;
    object-fit: cover;
}

.blog-details .admin img{
    width: 40px;
height: 40px;
border-radius: 40px;
}

.blog-details .admin .name{
    color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}

.blog-details .whatsapp{
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 36px;
background: #25D366;
}

.blog-details .whatsapp svg{
    width: 16px;
    height: 16px;
    color: white;
}

.blog-details .facebook{
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 36px;
background: #3B5998;
}

.blog-details .facebook svg{
    width: 16px;
    height: 16px;
    color: white;
}

.blog-details .twitter{
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 36px;
    background: #1DA1F2;
}

.blog-details .twitter svg{
    width: 16px;
    height: 16px;
    color: white;
}

.blog-details .linkedin{
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 36px;
    background: #0077B5;
}

.blog-details .linkedin svg{
    width: 16px;
    height: 16px;
    color: white;
}

.blog-details .pinterest{
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 36px;
    background: #CB2027;
}

.blog-details .pinterest svg{
    width: 16px;
    height: 16px;
    color: white;
}

.blog-details .link{
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 36px;
    background: var(--Gray-500, #77878F);
}

.blog-details .link svg{
    width: 16px;
    height: 16px;
    color: white;
}

.blog-details .quote{
    display: flex;
padding: 40px;
align-items: flex-start;
gap: 24px;
background: var(--Primary-50, #FFF3EB);
box-shadow: 4px 0px 0px 0px #FA8232 inset;
}

.blog-details .quote svg{
    width: 56px;
    height: 56px;
}

.blog-details .quote .quote-text{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}

.blog-details .sub-image img{
    width: 100%;
height: 424px;
}

.blog-details .leave-comment label{
    color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.blog-details .leave-comment input[type="text"], .blog-details .leave-comment input[type="email"]{
    height: 44px;
align-self: stretch;
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.blog-details .leave-comment textarea{
    display: flex;
    height: 124px;
    /* padding: 12px 613px 92px 16px; */
    align-items: center;
    align-self: stretch;
    border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.blog-details .post-comment{
    border: none;
    outline: none;
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);

color: var(--Gray-00, #FFF);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px;
letter-spacing: 0.168px;
text-transform: uppercase;
}

.blog-details .comments-div .comment img{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 40px;
    object-fit: cover;
}

.blog-details .comments-div .comment .name{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}

.blog-details .comments-div .comment .date{
    color: var(--Gray-500, #77878F);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
}

.blog-details .comments-div .comment .description{
    color: var(--Gray-700, #475156);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.blog-details .load-more button{
    border: none;
    outline: none;
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
border: 2px solid var(--Primary-100, #FFE7D6);
}

.blog-details .load-more button svg{
    width: 20px;
height: 20px;
}

.blog-details .load-more button .text{
    color: var(--Primary-500, #FA8232);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px;
letter-spacing: 0.168px;
text-transform: uppercase;
}

/**********************sidebar*******************/

.blog-details-sidebar .search{
    display: flex;
    padding: 12px 16px;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.blog-details-sidebar .search .search-box{
    width: 85%;
    height: 100%; 
}

.blog-details-sidebar .search .search-box input{
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: "Public Sans";
    font-weight: 400;
    line-height: 20px;
    text-align: start;
}

.blog-details-sidebar .search svg{
    width: 18px;
    height: 18px;
}

.blog-details-sidebar .sidebar .card{
    border: none;
    display: flex;
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.blog-details-sidebar .sidebar img{
    width: 100%;
height: 80px;
border-radius: 2px;
}

/* .blog-page .sidebar .card:hover img{
    width: 100%;
height: 80px;
border-radius: 2px;
} */

.blog-details-sidebar .sidebar .blog-title{
    color: var(--Gray-900, #191C1F);

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

.blog-details-sidebar .sidebar .blog-date{
    color: var(--Gray-500, #77878F);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.blog-details-sidebar .gallery .gallery-img{
    width: 80px;
height: 80px;
flex-shrink: 0;
border-radius: 2px;
}

.blog-details-sidebar .title{
    color: var(--Gray-900, #191C1F);

    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-transform: uppercase;
}

.blog-details-sidebar  label{
color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 20px;
padding-left: 5px;
}

.blog-details-sidebar .category label.active{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding-left: 3px;
}

.blog-details-sidebar input[type="radio"]{
    width: 18px;
    height: 18px;
    /* border-radius: 100px;
    border: 1px solid var(--Gray-200, #C9CFD2);
    background: var(--Gray-00, #FFF);
} */
}

.blog-details-sidebar .form-check-input:focus {
    outline: none;
    border:none;
}


.blog-details-sidebar .form-check-input:checked {
    outline: none;
    background-color: var(--Primary-500, #FA8232);
    border-color: var(--Primary-500, #FA8232);
}

.blog-details-sidebar .blog a{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}

.blog-details-sidebar .blog .blog-date{
    color: var(--Gray-500, #77878F);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.blog-details-sidebar .blog-page-sidebar .hr-line{
/* width: 312px; */
width: 100%;
height: 1px;
background: #E4E7E9;
margin: 20px 0px; 
}

.blog-details-sidebar input[type="checkbox"]{
width: 20px;
height: 20px;
border-radius: 2px;
/* border: 1px solid var(--Gray-200, #C9CFD2);
background: var(--Gray-00, #FFF); */
}

.blog-details-sidebar .popular-tag-div{
    margin-bottom: 20px;
}

.blog-details-sidebar .popular-tag .tag{
display: inline-flex;
flex-wrap: wrap;
padding: 6px 12px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
margin-bottom: 10px;

color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
transition: all 0.3s ease-in-out;
}

.blog-details-sidebar .popular-tag .tag:hover{
border: 1px solid var(--Primary-500, #FA8232);
background: var(--Primary-50, #FFF3EB);

color: var(--Primary-500, #FA8232);

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

/*********************************************************Dashboard Page CSS Start******************************************************/

.dashboard-page-section{
    background: #FFF;
    width: 100%;
    height: 100%;
    padding: 40px 0px;
}

.dashboard{

}

.dashboard .sidebar .dashboard-card{
    width: 100%;
    display: flex;
padding: 16px 0px;
flex-direction: column;
align-items: flex-start;
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.08);
}

.dashboard .sidebar .dashboard-card .card-body{
    width: 100%;
}

.dashboard .sidebar .dashboard-card .icon svg{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.dashboard .sidebar .dashboard-card .nav-item{
    width: 100%;
} 

.dashboard .sidebar .dashboard-card .nav-link .text{
    color: var(--Gray-600, #5F6C72);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
margin-left: 5px;
}

.dashboard .sidebar .nav-item-active{
    background: var(--Primary-500, #FA8232);
}

.dashboard .sidebar .nav-link-active{
    color: white !important;
}

.dashboard .sidebar .nav-link-active svg{
    color: white !important;
}

.dashboard .user-details .card{
    display: flex;
padding-bottom: 10px;
flex-direction: column;
align-items: flex-start;
/* gap: 22px; */
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.dashboard .user-details .card .card-header{
    border: none;
    outline: none;
    display: flex;
width: 100%;
height: 52px;
/* padding: 16px 183px 16px 24px; */
align-items: center;
border-radius: 4px 4px 0px 0px;
border-bottom: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.dashboard .user-details img{
    width: 48px;
height: 48px;
border-radius: 48px;
}

.dashboard .user-details .card-body .name{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}

.dashboard .user-details .card-body .location{
    color: var(--Gray-600, #5F6C72);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.dashboard .user-details .card-body .email{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.dashboard .user-details .card-body .web-address{
    color: var(--Gray-600, #5F6C72);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.dashboard .user-details .card-body .edit-btn{
    display: inline-flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
border: 2px solid var(--Secondary-100, #D5EDFD);

color: var(--Secondary-500, #2DA5F3);

font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px;
letter-spacing: 0.168px;
text-transform: uppercase;
}

.dashboard .user-details .order{
    display: flex;
padding: 10px;
justify-content: start;
align-items: center;
gap: 5px;
border-radius: 4px;
} 

.order-info{
    background: var(--Secondary-50, #EAF6FE);
}

.order-warning{
    background: var(--Primary-50, #FFF3EB);
}

.order-success{
    background: var(--Success-50, #EAF7E9);
}

.dashboard .user-details .order .icon-div{
    display: flex;
    padding: 5px;
    align-items: flex-start;
    gap: 5px;
    border-radius: 2px;
background: var(--Gray-00, #FFF);
}

.dashboard .user-details .order .icon-div svg{
    width: 32px;
height: 32px;
}

.dashboard .user-details .order .order-heading{
    color: var(--Gray-900, #191C1F);

/* Body/XL/600 */
font-family: "Public Sans";
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 140% */
}

.dashboard .user-details .order .order-para{
    color: var(--Gray-700, #475156);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}


.dashboard .payment .card-header{
    display: flex;
/* width: 984px; */
/* height: 52px; */
padding: 10px 24px;
justify-content: space-between;
align-items: center;
/* gap: 723px; */
flex-shrink: 0;

border-radius: 4px 4px 0px 0px;
border-bottom: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.dashboard .payment .add-card .text{
    color: var(--Primary-500, #FA8232);

    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
}

.dashboard .payment .add-card .text .icon svg{
    width: 20px;
height: 20px;
}

.dashboard .visa-payment{
    width: 100%;
/* height: 196px; */
height: 100%;
flex-shrink: 0;
border-radius: 4px;
background: radial-gradient(236.15% 138.52% at 0% 0%, #1B6392 0%, #124261 100%);
}

.dashboard .visa-payment .amount{
    color: var(--Gray-00, #FFF);

/* Body/Medium/600 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}

.dashboard .visa-payment .dot-icon svg{
    width: 24px;
height: 24px;
flex-shrink: 0;
color: #FFFFFF;
cursor: pointer;
}

.dashboard .custom-payment-dropdown-toggle::after {
    display: none; /* Hide the default arrow */
}

.dashboard .custom-payment-dropdown-toggle {
    display: inline-flex;
    align-items: center;
}

.dashboard .dropdown-menu.payment-dropdown-menu.show{
    padding: 8px 0px;
    border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);

box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
}

.dashboard .dropdown-menu {
    min-width:6rem;
}

.dashboard .visa-payment .card-number{
    color: var(--Gray-White, #FFF);

/* Body/XL/400 */
font-family: "Public Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.dashboard .visa-payment .copy-icon svg{
    width: 20px;
height: 20px;
color: #FFFFFF;
cursor: pointer;
}

.dashboard .visa-payment .card-icon svg{
    width: 40px;
height: 40px;
flex-shrink: 0;
color: #FFFFFF;
}

.dashboard .visa-payment .holder-name{
    color: var(--Gray-00, #FFF);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.dashboard .mastercard-payment{
    width: 100%;
/* height: 196px; */
height: 100%;
flex-shrink: 0;
border-radius: 4px;
background: radial-gradient(236.15% 138.52% at 0% 0%, #248E1D 0%, #2DB224 100%);
}

.dashboard .mastercard-payment .amount{
    color: var(--Gray-00, #FFF);

/* Body/Medium/600 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 150% */
}

.dashboard .mastercard-payment .dot-icon svg{
    width: 24px;
height: 24px;
flex-shrink: 0;
color: #FFFFFF;
cursor: pointer;
}

.dashboard .mastercard-payment .card-number{
    color: var(--Gray-White, #FFF);

/* Body/XL/400 */
font-family: "Public Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.dashboard .mastercard-payment .copy-icon svg{
    width: 20px;
height: 20px;
color: #FFFFFF;
cursor: pointer;
}

.dashboard .mastercard-payment .card-icon svg{
    width: 40px;
height: 40px;
flex-shrink: 0;
color: #FFFFFF;
}

.dashboard .mastercard-payment .holder-name{
    color: var(--Gray-00, #FFF);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.dashboard .recent-order .card-header{
    display: flex;
/* width: 984px; */
/* height: 52px; */
padding: 10px 24px;
justify-content: space-between;
align-items: center;
/* gap: 723px; */
flex-shrink: 0;

border-radius: 4px 4px 0px 0px;
border-bottom: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.dashboard .recent-order .add-card .text{
    color: var(--Primary-500, #FA8232);

    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
}

.dashboard .recent-order .add-card .text .icon svg{
    width: 20px;
height: 20px;
}

.custom-table-light {
    color: #fff;
    background: var(--Gray-50, #F2F4F5);
    border-bottom: 1px solid var(--Gray-100, #E4E7E9);
}

.dashboard .recent-order .custom-table-light .text{
    color: var(--Gray-700, #475156);

font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 150%;
text-transform: uppercase;
}

.dashboard .recent-order .order-id{
    color: var(--Gray-900, #191C1F);

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

.dashboard .recent-order .in-process-status{
    color: var(--Primary-500, #FA8232);

    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    text-transform: uppercase;
}

.dashboard .recent-order .complete-status{
    color: var(--Success-500, #2DB224);

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
text-transform: uppercase;
}

.dashboard .recent-order .cancel-status{
    color: var(--Danger-500, #EE5858);

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
text-transform: uppercase;
}

.dashboard .recent-order .date{
    color: var(--Gray-600, #5F6C72);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.dashboard .recent-order .total{
    color: var(--Gray-700, #475156);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.dashboard .recent-order .view-details .text{
    color: var(--Secondary-500, #2DA5F3);

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
}

.dashboard .browsing-history .card-header{
    display: flex;
/* width: 984px; */
/* height: 52px; */
padding: 10px 24px;
justify-content: space-between;
align-items: center;
/* gap: 723px; */
flex-shrink: 0;

border-radius: 4px 4px 0px 0px;
border-bottom: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.dashboard .browsing-history .add-card .text{
    color: var(--Primary-500, #FA8232);

    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
}

.dashboard .browsing-history .add-card .text .icon svg{
    width: 20px;
height: 20px;
}

.dashboard-product .dashboard-product-card{
    position: relative; 
    overflow: hidden;
    /* width: 248px; */
    width: 100%;
    height: 320px;
    border-radius: 3px;
    border-right: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
}



.dashboard-product-card .card .card-body{
    margin: 0;
    padding: 0;
    padding: 15px;
}

.dashboard-product-card .image-container {
        position: relative;
}
    
.dashboard-product-card .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
        opacity: 0;
        transition: opacity 0.3s ease;
}
    
.dashboard-product-card:hover .image-overlay {
        opacity: 1;
}
    
    .dashboard-product-card:hover .wishlist-cart-preview {
        display: flex !important;
    }
    
    .dashboard-product-card .sold-out-tag{
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    padding: 5px 10px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
    background: var(--Gray-400, #929FA5);
    }
    
    .dashboard-product-card .sold-out-tag span{
        color: var(--Gray-00, #FFF);
    
        /* Body/Tiny/600 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; /* 133.333% */
    }
    
    .dashboard-product-card .off{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
        background: var(--Warning-400, #EFD33D);
    }
    
    .dashboard-product-card .off span{
        color: var(--Gray-900, #191C1F);
    
        /* Body/Tiny/600 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; /* 133.333% */
    }
    
    .dashboard-product-card .hot-tag{
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    padding: 5px 10px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
    background: var(--Danger-500, #EE5858);
    }
    
    .dashboard-product-card .hot-tag span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; 
    }

    .dashboard-product-card .best-deals-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
        background: var(--Secondary-500, #2DA5F3);
    }
        
    .dashboard-product-card .best-deals-tag span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px;
    }

    .dashboard-product-card .sale{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 2px;
        background: var(--Success-500, #2DB224);
    }
        
    .dashboard-product-card .sale span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; 
    }
    
    .dashboard-product-card .wishlist-cart-preview{
        position: absolute;
        top: 27%;
        left: 11%;
        display: none;
    }
    
    .dashboard-product-card .wishlist-cart-preview .wishlist-div-icon{
    display: flex;
    /* padding: 12px; */
    width: 40px !important;
    height: 40px !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 50%;
    /* background: var(--Gray-00, #62a7c2); */
    background: var(--Gray-00, #FFF);
    margin: 0 5px;
    }
    
    .dashboard-product-card .wishlist-cart-preview .cart-icon{
        display: flex;
        /* padding: 12px; */
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 50%;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 5px;
    }
    
    .dashboard-product-card .wishlist-cart-preview .preview-icon{
            display: flex;
            /* padding: 12px; */
            width: 40px;
            height: 40px;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 100%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 5px;
    }
    
    .dashboard-product-card .wishlist-cart-preview .wishlist-div-icon svg{
    width: 20px;
    height: 20px;
    color: black;
    }
    
    .dashboard-product-card .wishlist-cart-preview .cart-icon svg{
        width: 20px;
        height: 20px;
        color: black;
    }
    
    .dashboard-product-card .wishlist-cart-preview .preview-icon svg{
            width: 20px;
            height: 20px;
            color: black;
    }
    
    .dashboard-product-card .wishlist-cart-preview .wishlist-div-icon:hover {
        background: var(--Primary-500, #FA8232);
    }
    
    .dashboard-product-card .wishlist-cart-preview .cart-icon:hover {
        background: var(--Primary-500, #FA8232);
    }
    
    .dashboard-product-card .wishlist-cart-preview .preview-icon:hover {
        background: var(--Primary-500, #FA8232);
    }
    
    .dashboard-product-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
        color: white;
    }
    
    .dashboard-product-card .wishlist-cart-preview .cart-icon:hover svg{
        color: white;
    }
    
    .dashboard-product-card .wishlist-cart-preview .preview-icon:hover svg{
        color: white;
    }
    
    .dashboard-product-card img{
        /* width: 216px; */
    width: 100%;
    height: 172px;
    flex-shrink: 0;
    }
    
    .dashboard-product-card .product-name{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .dashboard-product-card .actual-price{
        color: var(--Gray-400, #929FA5);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    text-decoration-line: strikethrough;
    padding-top: 5px;
    }
    
    .dashboard-product-card .product-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        padding-top: 5px;
    }

    .dashboard-product-card .rating{
        padding: 5px 0px;
    }
    
    .dashboard-product-card .rating .icon svg{
        width: 16px;
        height: 16px;
    }
    
    .dashboard-product-card .rating .count{
        color: var(--Gray-500, #77878F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }
    
    .dashboard .pagination .arrow-icon{
        display: flex;
padding: 8px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
border: 1.5px solid var(--Primary-500, #FA8232);
cursor: pointer;
    }

    .dashboard .pagination .arrow-icon svg{
        width: 24px;
height: 24px;
    }

    /* .dashboard .pagination .bullet-icon{
        width: 8px;
height: 8px;
    }
    .dashboard .pagination .current-bullet-icon{
        width: 8px;
height: 8px;
    } */

/*********************************************************Dashboard Page CSS End******************************************************/

/*********************************************************Order History Page CSS Start****************************************************/
.order-history .in-process-div{
    display: inline-flex;
    padding: 5px 10px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 3px;
background: var(--Warning-100, #FBF4CE);
color: var(--Gray-900, #191C1F);

/* Body/Tiny/600 */
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 133.333% */
}

.order-history .text{
    color: var(--Gray-700, #475156);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

.order-history .data{
    color: var(--Gray-900, #191C1F);

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
}

.order-history .amount{
    color: var(--Secondary-500, #2DA5F3);

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
}

/**********************************************************Order History Page CSS End*****************************************************/

/***********************************************************************************************/

.dashboard .form-control{
    height: 44px;
    align-self: stretch;
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
}

.dashboard .add-card-btn{
    border: none;
    outline: none;
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);

color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
margin-bottom: 10px;
}

/*************************************************************************************************/

/******************************************Browsing History Page CSS Start*******************************************************/

.browsing-history-page .load-more{
    display: inline-flex;
padding: 0px 32px;
justify-content: center;
align-items: center;
gap: 12px;
border-radius: 3px;
border: 2px solid var(--Primary-100, #FFE7D6);
cursor:pointer;
}

.browsing-history-page .load-more .icon svg{
    width: 24px;
height: 24px;
}

.browsing-history-page .load-more .text{
    color: var(--Primary-500, #FA8232);

font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 56px;
letter-spacing: 0.192px;
text-transform: uppercase;
}

/* .custom-browsing-history-checkbox {
    border: 2px solid #FA8232;
    cursor: pointer;
} */

.custom-browsing-history-checkbox:checked{
    background-color: #FA8232;
    border-color: #FA8232;
}

.custom-browsing-history-checkbox:focus {
    box-shadow: none;
    outline: none;
}

.browsing-history-page .browsing-history-search{
    display: flex;
width: 100%;
height: 44px;
padding: 10px 15px;
align-items: center;
gap: 12px;

border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.browsing-history-page .browsing-history-search .icon svg{
    width: 20px;
height: 20px;
flex-shrink: 0;
}

.browsing-history-page .browsing-history-search .search-box{
    width: 90%;
    height: 100%;
}

.browsing-history-page .browsing-history-search .search-box input{

    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    background-color: transparent;

    color: var(--Gray-500, #77878F);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

.browsing-history-date .input-group-append {
    cursor: pointer;
}


/**********************************************Browsing History Page CSS End*************************************************************/

/**********************************************Order Details Page CSS Start***********************************************************/
.order-details-page{

}

.order-details-page .order-details{
    width: 100%;
    padding: 24px;
    border-radius: 4px;
border: 1px solid var(--Warning-200, #F7E99E);
background: var(--Warning-50, #FDFAE7);
}

.order-details-page .order-details .order-number{
    color: var(--Gray-900, #191C1F);

/* Body/XL/400 */
font-family: "Public Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.order-details-page .order-details .products.date{
    color: var(--Gray-700, #475156);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

.order-details-page .order-details .order-amount{
    color: var(--Secondary-500, #2DA5F3);

/* Heading/02 */
font-family: "Public Sans";
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 114.286% */
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

.order-details-page .order-track .container {
    margin-top: 5px;
    margin-bottom: 5px;
}

.order-details-page .order-track .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    /* border: 1px solid rgba(0, 0, 0, 0.1); */
    border-radius: 0.10rem;
}

.order-details-page .order-track .track {
    position: relative;
    background: var(--Primary-100, #FFE7D6);
    height: 7px;
    display: flex;
    margin-bottom: 70px;
    margin-top: 10px;
}


.order-details-page .order-track .track .step {
    flex-grow: 1;
    width: 25%;
    margin-top: -18px;
    text-align: center;
    position: relative;
}

.order-details-page .order-track .track .step.active:before {
    background: var(--Primary-500, #FA8232);
}

.order-details-page .order-track .track .step::before {
    height: 7px;
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    top: 18px;
}

.order-details-page .order-track .track .step.active .icon {
    background: var(--Primary-500, #FA8232);
    color: #fff;
}

/* .order-details-page .order-track .track .step.on-the-way .icon {
    background: var(--Primary-500, #FA8232);
    color: #fff;
} */


/* .order-details-page .order-track .track .icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: relative;
    border-radius: 100%;
    background: #ddd;
} */

.order-details-page .order-track .track .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    position: relative;
    border-radius: 100%;
    background: #ffffff;
    border: 1px solid #FA8232;
    top: 10px;
}

.order-details-page .order-track .track .icon i{
    font-size: 12px;
}

.order-details-page .order-track .track .step.active .text {
    font-weight: 400;
    color: #000;
}

.order-details-page .order-track .track .text {
    display: block;
    margin-top: 7px;
}

.order-details-page .order-track .text svg{
    width: 32px;
height: 32px;
}

.order-details-page .order-track .text .order-status{
    color: var(--Gray-900, #191C1F);
text-align: center;

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

.order-details-page .order-track .order-arrival{
    color: var(--Gray-700, #475156);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.order-details-page .order-track .order-arrival .arrival-date{
    color: var(--Gray-900, #191C1F);

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}


.order-details-page .order-activity{
    padding: 10px;
}

.order-details-page  .order-activity .title{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}

.order-details-page  .order-activity .success-div-icon{
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
border: 1px solid var(--Success-100, #D5F0D3);
background: var(--Success-50, #EAF7E9);
}

.order-details-page .order-activity .secondary-div-icon{
    display: flex;
    padding: 12px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 2px;
border: 1px solid var(--Secondary-100, #D5EDFD);
background: var(--Secondary-50, #EAF6FE);
}

.order-details-page .order-activity .activity svg{
    width: 24px;
height: 24px;
}

.order-details-page .order-activity .activity .text{
    color: var(--Gray-900, #191C1F);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.order-details-page .order-activity .activity .date{
    color: var(--Gray-500, #77878F);

    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.order-details-page .shopping-card-item img{
    /* width: 80px; */
    height: 80px;
}

.order-details-page .quantity{
    color: var(--Gray-700, #475156);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.order-details-page .shopping-card-item .sub-category{
    color: var(--Secondary-500, #2DA5F3);

/* Body/Tiny/600 */
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 16px; /* 133.333% */
}

.order-details-page .hr-line{
    width: 100%;
height: 1px;
background: #E4E7E9;
}

.order-details-page .card-bottom{
    padding: 24px;
}

.order-details-page .card-bottom a{
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
border: 2px solid var(--Secondary-500, #2DA5F3);
}

.order-details-page .card-bottom a .text{
    color: var(--Secondary-500, #2DA5F3);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 45px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.order-details-page .card-bottom a .icon svg{
    width: 20px;
height: 20px;
}

.order-details-page .card.user-details-notes{
    border: none;
    border-right: 1px solid #ddd;
}

.order-details-page .user-details-notes .title{
    color: var(--Gray-900, #191C1F);

/* Body/Large/500 */
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 133.333% */
}
.order-details-page .user-details-notes .name{
    color: var(--Gray-900, #191C1F);

/* Body/Small/500 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
} 
.order-details-page .user-details-notes .address{
    color: var(--Gray-600, #5F6C72);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}
.order-details-page .user-details-notes .contact{
    color: var(--Gray-900, #191C1F);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
} 
.order-details-page .user-details-notes .number{
    color: var(--Gray-600, #5F6C72);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}  
.order-details-page .user-details-notes .email{
    color: var(--Gray-600, #5F6C72);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}  

.order-details-custom-dropdown .dropdown-menu {
    width: 100%;
}

.order-details-custom-dropdown .dropdown-item {
    display: flex;
    align-items: center;
}

.order-details-custom-dropdown .icon {
    margin-right: 8px;
}

/***********************************************Order Details Page CSS End***************************************************************/

/*************************************************Setting Page CSS Start***************************************************************/

.setting-page .save-changes{
    border: none;
    outline: none;
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);

color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; 
letter-spacing: 0.168px;
text-transform: uppercase;
}

.setting-page .form-control{
    display: flex;
height: 44px;
padding: 12px 16px;
justify-content: center;
align-items: center;
gap: 305px;
align-self: stretch;

border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);

color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.setting-page select, .setting-page select option{
    display: flex;
    height: 44px;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 118px;
    align-self: stretch;

    border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);


color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

/*************************************************Setting Page CSS End****************************************************************/

/********************************************************Blog Details Section CSS End****************************************************/

/***todo:************************************************Blog Page Section CSS End********************************************************/

/***************************************************Track Order Page Media Queries End**************************************************/

/***************************************************Setting Page Media Queries Start****************************************************/
@media(min-width: 770px) AND (max-width: 1024px){
    .setting-page .save-changes{
        border: none;
        outline: none;
        display: flex;
    padding: 0px 14px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; 
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
}

@media(min-width: 430px) AND (max-width: 768px){
    .setting-page .save-changes{
        border: none;
        outline: none;
        display: flex;
    padding: 0px 10px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 45px; 
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
}

/****************************************************Setting Page Media Queries End*****************************************************/

/***************************************************Dashboard Page Media Quereis Start***************************************************/
@media (min-width: 300px) AND (max-width: 768px){
    .dashboard{

    }
    
    .dashboard .sidebar .dashboard-card{
        width: 100%;
        display: flex;
    padding: 12px 0px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 3px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.08);
    }
    
    .dashboard .sidebar .dashboard-card .card-body{
        width: 100%;
    }
    
    .dashboard .sidebar .dashboard-card .icon svg{
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    
    .dashboard .sidebar .dashboard-card .nav-item{
        width: 100%;
    } 
    
    .dashboard .sidebar .dashboard-card .nav-link .text{
        color: var(--Gray-600, #5F6C72);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin-left: 5px;
    }
    
    .nav-item-active{
        background: var(--Primary-500, #FA8232);
    }
    
    .nav-link-active{
        color: white !important;
    }
    
    .nav-link-active svg{
        color: white !important;
    }
    
    .dashboard .user-details .card{
        display: flex;
    padding-bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 22px; */
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .dashboard .user-details .card .card-header{
        border: none;
        outline: none;
        display: flex;
    width: 100%;
    height: 52px;
    /* padding: 16px 183px 16px 24px; */
    align-items: center;
    border-radius: 4px 4px 0px 0px;
    border-bottom: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .dashboard .user-details img{
        width: 35px;
    height: 35px;
    border-radius: 35px;
    }
    
    .dashboard .user-details .card-body .name{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    }
    
    .dashboard .user-details .card-body .location{
        color: var(--Gray-600, #5F6C72);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; 
    }
    
    .dashboard .user-details .card-body .email{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .dashboard .user-details .card-body .web-address{
        color: var(--Gray-600, #5F6C72);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .dashboard .user-details .card-body .edit-btn{
        display: inline-flex;
    padding: 0px 10px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 2px;
    border: 2px solid var(--Secondary-100, #D5EDFD);
    
    color: var(--Secondary-500, #2DA5F3);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
    .dashboard .user-details .order{
        display: flex;
    padding: 10px;
    justify-content: start;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    } 
    
    .order-info{
        background: var(--Secondary-50, #EAF6FE);
    }
    
    .order-warning{
        background: var(--Primary-50, #FFF3EB);
    }
    
    .order-success{
        background: var(--Success-50, #EAF7E9);
    }
    
    .dashboard .user-details .order .icon-div{
        display: inline-flex;
        /* padding: 4px; */
        align-items: center;
        gap: 5px;
        border-radius: 2px;
        background: var(--Gray-00, #FFF);
    }
    
    .dashboard .user-details .order .icon-div svg{
        width: 32px;
        height: 32px;
    }
    
    .dashboard .user-details .order .order-heading{
        color: var(--Gray-900, #191C1F);
    
    /* Body/XL/600 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 140% */
    }
    
    .dashboard .user-details .order .order-para{
        color: var(--Gray-700, #475156);
    
    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    }
    
    
    .dashboard .payment .card-header{
        display: flex;
    /* width: 984px; */
    /* height: 52px; */
    padding: 10px 24px;
    justify-content: space-between;
    align-items: center;
    /* gap: 723px; */
    flex-shrink: 0;
    
    border-radius: 4px 4px 0px 0px;
    border-bottom: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .dashboard .payment .add-card .text{
        color: var(--Primary-500, #FA8232);
    
        /* Body/Small/600 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; /* 142.857% */
    }
    
    .dashboard .payment .add-card .text .icon svg{
        width: 20px;
    height: 20px;
    }
    
    .dashboard .visa-payment{
        width: 100%;
    /* height: 196px; */
    height: 100%;
    flex-shrink: 0;
    border-radius: 4px;
    background: radial-gradient(236.15% 138.52% at 0% 0%, #1B6392 0%, #124261 100%);
    }
    
    .dashboard .visa-payment .amount{
        color: var(--Gray-00, #FFF);
    
    /* Body/Medium/600 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 150% */
    }
    
    .dashboard .visa-payment .dot-icon svg{
        width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #FFFFFF;
    cursor: pointer;
    }
    
    .dashboard .custom-payment-dropdown-toggle::after {
        display: none; /* Hide the default arrow */
    }
    
    .dashboard .custom-payment-dropdown-toggle {
        display: inline-flex;
        align-items: center;
    }
    
    .dashboard .dropdown-menu.payment-dropdown-menu.show{
        padding: 8px 0px;
        border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    
    box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
    }
    
    .dashboard .dropdown-menu {
        min-width:6rem;
    }
    
    .dashboard .visa-payment .card-number{
        color: var(--Gray-White, #FFF);
    
    /* Body/XL/400 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 140% */
    }
    
    .dashboard .visa-payment .copy-icon svg{
        width: 16px;
    height: 16px;
    color: #FFFFFF;
    cursor: pointer;
    }
    
    .dashboard .visa-payment .card-icon svg{
        width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: #FFFFFF;
    }
    
    .dashboard .visa-payment .holder-name{
        color: var(--Gray-00, #FFF);
    
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 142.857% */
    }
    
    .dashboard .mastercard-payment{
        width: 100%;
    /* height: 196px; */
    height: 100%;
    flex-shrink: 0;
    border-radius: 4px;
    background: radial-gradient(236.15% 138.52% at 0% 0%, #248E1D 0%, #2DB224 100%);
    }
    
    .dashboard .mastercard-payment .amount{
        color: var(--Gray-00, #FFF);
    
    /* Body/Medium/600 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 150% */
    }
    
    .dashboard .mastercard-payment .dot-icon svg{
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: #FFFFFF;
        cursor: pointer;
    }
    
    .dashboard .mastercard-payment .card-number{
        color: var(--Gray-White, #FFF);
    
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .dashboard .mastercard-payment .copy-icon svg{
        width: 18px;
        height: 18px;
        color: #FFFFFF;
        cursor: pointer;
    }
    
    .dashboard .mastercard-payment .card-icon svg{
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        color: #FFFFFF;
    }
    
    .dashboard .mastercard-payment .holder-name{
        color: var(--Gray-00, #FFF);
    
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
    }
    
    .dashboard .recent-order .card-header{
        display: flex;
    /* width: 984px; */
    /* height: 52px; */
    padding: 10px 24px;
    justify-content: space-between;
    align-items: center;
    /* gap: 723px; */
    flex-shrink: 0;
    
    border-radius: 4px 4px 0px 0px;
    border-bottom: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .dashboard .recent-order .add-card .text{
        color: var(--Primary-500, #FA8232);
    
        /* Body/Small/600 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px; /* 142.857% */
    }
    
    .dashboard .recent-order .add-card .text .icon svg{
        width: 18px;
        height: 18px;
    }
    
    .custom-table-light {
        color: #fff;
        background: var(--Gray-50, #F2F4F5);
        border-bottom: 1px solid var(--Gray-100, #E4E7E9);
    }
    
    .dashboard .recent-order .custom-table-light .text{
        color: var(--Gray-700, #475156);
    
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        text-transform: uppercase;
    }
    
    .dashboard .recent-order .order-id{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
    }
    
    .dashboard .recent-order .in-process-status{
        color: var(--Primary-500, #FA8232);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        text-transform: uppercase;
    }
    
    .dashboard .recent-order .complete-status{
        color: var(--Success-500, #2DB224);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        text-transform: uppercase;
    }
    
    .dashboard .recent-order .cancel-status{
        color: var(--Danger-500, #EE5858);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        text-transform: uppercase;
    }
    
    .dashboard .recent-order .date{
        color: var(--Gray-600, #5F6C72);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .dashboard .recent-order .total{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .dashboard .recent-order .view-details .text{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
    }
    
    .dashboard .browsing-history .card-header{
        display: flex;
        /* width: 984px; */
        /* height: 52px; */
        padding: 10px 24px;
        justify-content: space-between;
        align-items: center;
        /* gap: 723px; */
        flex-shrink: 0;
    
        border-radius: 4px 4px 0px 0px;
        border-bottom: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
    }
    
    .dashboard .browsing-history .add-card .text{
        color: var(--Primary-500, #FA8232);
    
        /* Body/Small/600 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; /* 142.857% */
    }
    
    .dashboard .browsing-history .add-card .text .icon svg{
        width: 18px;
    height: 18px;
    }
    
    .dashboard-product .dashboard-product-card{
        position: relative; 
        overflow: hidden;
        /* width: 248px; */
        width: 100%;
        height: 320px;
        border-radius: 3px;
        border-right: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
    }
    
    
    
    .dashboard-product-card .card .card-body{
        margin: 0;
        padding: 0;
        padding: 15px;
    }
    
    .dashboard-product-card .image-container {
            position: relative;
    }
        
    .dashboard-product-card .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
            opacity: 0;
            transition: opacity 0.3s ease;
    }
        
    .dashboard-product-card:hover .image-overlay {
            opacity: 1;
    }
        
        .dashboard-product-card:hover .wishlist-cart-preview {
            display: flex !important;
        }
        
        .dashboard-product-card .sold-out-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 4px 8px;
        align-items: flex-start;
        gap: 8px;
        border-radius: 2px;
        background: var(--Gray-400, #929FA5);
        }
        
        .dashboard-product-card .sold-out-tag span{
            color: var(--Gray-00, #FFF);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; /* 133.333% */
        }
        
        .dashboard-product-card .off{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 5px 10px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 2px;
            background: var(--Warning-400, #EFD33D);
        }
        
        .dashboard-product-card .off span{
            color: var(--Gray-900, #191C1F);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; /* 133.333% */
        }
        
        .dashboard-product-card .hot-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 4px 8px;
        align-items: flex-start;
        gap: 8px;
        border-radius: 2px;
        background: var(--Danger-500, #EE5858);
        }
        
        .dashboard-product-card .hot-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
    
        .dashboard-product-card .best-deals-tag{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 5px 10px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 2px;
            background: var(--Secondary-500, #2DA5F3);
        }
            
        .dashboard-product-card .best-deals-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
        }
    
        .dashboard-product-card .sale{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 5px 10px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 2px;
            background: var(--Success-500, #2DB224);
        }
            
        .dashboard-product-card .sale span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
        
        .dashboard-product-card .wishlist-cart-preview{
            position: absolute;
            top: 27%;
            left: 11%;
            display: none;
        }
        
        .dashboard-product-card .wishlist-cart-preview .wishlist-div-icon{
        display: flex;
        /* padding: 12px; */
        width: 30px !important;
        height: 30px !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 50%;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 5px;
        }
        
        .dashboard-product-card .wishlist-cart-preview .cart-icon{
            display: flex;
            /* padding: 12px; */
            width: 30px;
            height: 30px;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border-radius: 50%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 5px;
        }
        
        .dashboard-product-card .wishlist-cart-preview .preview-icon{
                display: flex;
                /* padding: 12px; */
                width: 30px;
                height: 30px;
                align-items: center;
                justify-content: center;
                gap: 6px;
                border-radius: 100%;
                /* background: var(--Gray-00, #62a7c2); */
                background: var(--Gray-00, #FFF);
                margin: 0 5px;
        }
        
        .dashboard-product-card .wishlist-cart-preview .wishlist-div-icon svg{
        width: 16px;
        height: 16px;
        color: black;
        }
        
        .dashboard-product-card .wishlist-cart-preview .cart-icon svg{
            width: 16px;
            height: 16px;
            color: black;
        }
        
        .dashboard-product-card .wishlist-cart-preview .preview-icon svg{
                width: 16px;
                height: 16px;
                color: black;
        }
        
        .dashboard-product-card .wishlist-cart-preview .wishlist-div-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .dashboard-product-card .wishlist-cart-preview .cart-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .dashboard-product-card .wishlist-cart-preview .preview-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .dashboard-product-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
            color: white;
        }
        
        .dashboard-product-card .wishlist-cart-preview .cart-icon:hover svg{
            color: white;
        }
        
        .dashboard-product-card .wishlist-cart-preview .preview-icon:hover svg{
            color: white;
        }
        
        .dashboard-product-card img{
            /* width: 216px; */
        width: 100%;
        height: 132px;
        flex-shrink: 0;
        }
        
        .dashboard-product-card .product-name{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }
        
        .dashboard-product-card .actual-price{
            color: var(--Gray-400, #929FA5);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
        text-decoration-line: strikethrough;
        padding-top: 5px;
        }
        
    .dashboard-product-card .product-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        padding-top: 5px;
    }
    
    .dashboard-product-card .rating{
        padding: 3px 0px;
    }
        
    .dashboard-product-card .rating .icon svg{
        width: 12px;
        height: 12px;
    }
        
    .dashboard-product-card .rating .count{
        color: var(--Gray-500, #77878F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }
        
    .dashboard .pagination .arrow-icon{
            display: flex;
        padding: 6px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 100px;
        border: 1.5px solid var(--Primary-500, #FA8232);
        cursor: pointer;
    }
    
    .dashboard .pagination .arrow-icon svg{
        width: 20px;
        height: 20px;
    }
    
        /* .dashboard .pagination .bullet-icon{
            width: 8px;
    height: 8px;
        }
        .dashboard .pagination .current-bullet-icon{
            width: 8px;
    height: 8px;
        } */
    
}


/***************************************************Dashboard Page Media Quereis End*****************************************************/

/************************************************Browsing History Media Queris End*************************************************/

/************************************************Dashboard Cards & Media Media Queris End*************************************************/

/***************************************************Blog Details Page Media Queries End**************************************************/
@media(min-width: 300px) AND (max-width: 768px){
    .blog-details-section .main-image{
        width: 100%;
        height: 350px;
        border-radius: 3px;
        object-fit: cover;
    }

    .blog-details .author .icon svg{
        width: 22px;
        height: 22px;
    }

    .blog-details .author .text{
        color: var(--Gray-700, #475156);

/* Body/Small/400 */
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
    }
    
    .blog-details .admin img{
        width: 40px;
    height: 40px;
    border-radius: 40px;
    }
    
    .blog-details .admin .name{
        color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    }
    
    .blog-details .whatsapp{
        display: flex;
        padding: 8px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 24px;
    background: #25D366;
    }
    
    .blog-details .whatsapp svg{
        width: 14px;
        height: 14px;
        color: white;
    }
    
    .blog-details .facebook{
        display: flex;
        padding: 8px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 24px;
    background: #3B5998;
    }
    
    .blog-details .facebook svg{
        width: 14px;
        height: 14px;
        color: white;
    }
    
    .blog-details .twitter{
        display: flex;
        padding: 8px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 24px;
        background: #1DA1F2;
    }
    
    .blog-details .twitter svg{
        width: 14px;
        height: 14px;
        color: white;
    }
    
    .blog-details .linkedin{
        display: flex;
        padding: 8px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 24px;
        background: #0077B5;
    }
    
    .blog-details .linkedin svg{
        width: 14px;
        height: 14px;
        color: white;
    }
    
    .blog-details .pinterest{
        display: flex;
        padding: 8px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 24px;
        background: #CB2027;
    }
    
    .blog-details .pinterest svg{
        width: 14px;
        height: 14px;
        color: white;
    }
    
    .blog-details .link{
        display: flex;
        padding: 8px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 24px;
        background: var(--Gray-500, #77878F);
    }
    
    .blog-details .link svg{
        width: 14px;
        height: 14px;
        color: white;
    }
    
    .blog-details .quote{
        display: flex;
    padding: 36px;
    align-items: flex-start;
    gap: 20px;
    background: var(--Primary-50, #FFF3EB);
    box-shadow: 4px 0px 0px 0px #FA8232 inset;
    }
    
    .blog-details .quote svg{
        width: 46px;
        height: 46px;
    }
    
    .blog-details .quote .quote-text{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    }
    
    .blog-details .sub-image img{
        width: 100%;
    height: 300px;
    }
    
    .blog-details .leave-comment label{
        color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .blog-details .leave-comment input[type="text"], .blog-details .leave-comment input[type="email"]{
        height: 44px;
    align-self: stretch;
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .blog-details .leave-comment textarea{
        display: flex;
        height: 124px;
        /* padding: 12px 613px 92px 16px; */
        align-items: center;
        align-self: stretch;
        border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .blog-details .post-comment{
        border: none;
        outline: none;
        display: flex;
    padding: 0px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    
    color: var(--Gray-00, #FFF);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
    .blog-details .comments-div .comment img{
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 40px;
        object-fit: cover;
    }
    
    .blog-details .comments-div .comment .name{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    }
    
    .blog-details .comments-div .comment .date{
        color: var(--Gray-500, #77878F);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; 
    }
    
    .blog-details .comments-div .comment .description{
        color: var(--Gray-700, #475156);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .blog-details .load-more button{
        border: none;
        outline: none;
        display: flex;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
    border: 2px solid var(--Primary-100, #FFE7D6);
    }
    
    .blog-details .load-more button svg{
        width: 20px;
    height: 20px;
    }
    
    .blog-details .load-more button .text{
        color: var(--Primary-500, #FA8232);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
    /**********************sidebar*******************/
    
    .blog-details-sidebar .search{
        display: flex;
        padding: 12px 16px;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .blog-details-sidebar .search .search-box{
        width: 85%;
        height: 100%; 
    }
    
    .blog-details-sidebar .search .search-box input{
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        font-size: 16px;
        font-family: "Public Sans";
        font-weight: 400;
        line-height: 20px;
        text-align: start;
    }
    
    .blog-details-sidebar .search svg{
        width: 18px;
        height: 18px;
    }
    
    .blog-details-sidebar .sidebar .card{
        border: none;
        display: flex;
        padding: 15px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .blog-details-sidebar .sidebar img{
        width: 100%;
    height: 80px;
    border-radius: 2px;
    }
    
    /* .blog-page .sidebar .card:hover img{
        width: 100%;
    height: 80px;
    border-radius: 2px;
    } */
    
    .blog-details-sidebar .sidebar .blog-title{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    }
    
    .blog-details-sidebar .sidebar .blog-date{
        color: var(--Gray-500, #77878F);
    
        /* Body/Small/400 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
    }
    
    .blog-details-sidebar .gallery .gallery-img{
        width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 2px;
    }
    
    .blog-details-sidebar .title{
        color: var(--Gray-900, #191C1F);
    
        font-family: "Public Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        text-transform: uppercase;
    }
    
    .blog-details-sidebar  label{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    padding-left: 5px;
    }
    
    .blog-details-sidebar .category label.active{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        padding-left: 3px;
    }
    
    .blog-details-sidebar input[type="radio"]{
        width: 18px;
        height: 18px;
        /* border-radius: 100px;
        border: 1px solid var(--Gray-200, #C9CFD2);
        background: var(--Gray-00, #FFF);
    } */
    }
    
    .blog-details-sidebar .form-check-input:focus {
        outline: none;
        border:none;
    }
    
    
    .blog-details-sidebar .form-check-input:checked {
        outline: none;
        background-color: var(--Primary-500, #FA8232);
        border-color: var(--Primary-500, #FA8232);
    }
    
    .blog-details-sidebar .blog a{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    }
    
    .blog-details-sidebar .blog .blog-date{
        color: var(--Gray-500, #77878F);
    
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .blog-details-sidebar .blog-page-sidebar .hr-line{
    /* width: 312px; */
    width: 100%;
    height: 1px;
    background: #E4E7E9;
    margin: 20px 0px; 
    }
    
    .blog-details-sidebar input[type="checkbox"]{
    width: 20px;
    height: 20px;
    border-radius: 2px;
    /* border: 1px solid var(--Gray-200, #C9CFD2);
    background: var(--Gray-00, #FFF); */
    }
    
    .blog-details-sidebar .popular-tag-div{
        margin-bottom: 20px;
    }
    
    .blog-details-sidebar .popular-tag .tag{
    display: inline-flex;
    flex-wrap: wrap;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    margin-bottom: 10px;
    
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
    }
    
    .blog-details-sidebar .popular-tag .tag:hover{
    border: 1px solid var(--Primary-500, #FA8232);
    background: var(--Primary-50, #FFF3EB);
    
    color: var(--Primary-500, #FA8232);
    
    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    }
    
}
/***************************************************Blog Details Page Media Queries End**************************************************/

/******************************************************Customer Support Media Queries***************************************************/
@media(min-width: 430px) AND (max-width: 768px){
    
.how-can-help-section .help-center{
    display: inline-flex;
padding: 6px 12px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 2px;
background: var(--Warning-400, #EFD33D);

color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 20px;
margin-bottom: 10px;
}

.how-can-help-section .title{
    color: var(--Gray-900, #191C1F);

/* Heading/01 */
font-family: "Public Sans";
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: 40px; /* 125% */
margin-bottom: 15px;
}

.how-can-help-section .search{
    width: 100%;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
height: 60px;
/* padding: 12px 114px 12px 12px; */
padding: 10px;
gap: 10px;
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.how-can-help-section .icon{
    width: 7%;
}
.how-can-help-section .icon svg{
    width: 20px;
height: 20px;
}

.how-can-help-section .search-box {
    width: 70%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.how-can-help-section .search-box input[type="text"]{
    display: flex;
width: 100%;
height: 100%;
/* padding: 12px 114px 12px 12px; */
align-items: center;
border-radius: 4px;
border: none;
background: var(--Gray-00, #FFF);
outline: none;

color: var(--Gray-500, #77878F);

/* Body/Medium/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 150% */
}

.how-can-help-section .submit-btn{
    border: none;
    outline: none;
    display: flex;
padding: 0px 24px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);

color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 48px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.how-can-help-section img{
    width: 100%;
    height: 350px;
    /* object-fit: cover; */
}

.we-assist-section{
width: 100%;
height: 100%;
background: var(--Gray-00, #FFF);
padding: 20px 0px;
}

.we-assist-section .heading{
    color: var(--Gray-900, #191C1F);
text-align: center;

/* Heading/01 */
font-family: "Public Sans";
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 40px; /* 125% */
}

.we-assist-section .card{
/* padding: 24px; */
border-radius: 4px;
border: 2px solid var(--Primary-100, #FFE7D6);
background: var(--Gray-00, #FFF);
}

.we-assist-section .card .icon svg{
    width: 28px;
height: 28px;
transition: all 0.3s ease-in-out;
}

.we-assist-section .card:hover{
    border-radius: 4px;
border: 2px solid var(--Primary-500, #FA8232);
background: var(--Gray-00, #FFF);
box-shadow: 0px 8px 40px 0px rgba(250, 130, 50, 0.12);
}

.we-assist-section .card .text{
    color: var(--Gray-900, #191C1F);

/* Body/Medium/500 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
}

.popular-topics-section{
    width: 100%;
    height: 100%;
    background: var(--Gray-00, #FFF);
    padding: 40px 0px;
}

.popular-topics-section .popular-topics .point:hover{
    color: var(--Primary-500, #FA8232);

    /* Body/Medium/600 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.popular-topics-section .popular-topics .point:hover span{
    color: var(--Primary-500, #FA8232);

    /* Body/Medium/600 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
}

.popular-topics-section .popular-topics .point span{
color: var(--Gray-900, #191C1F);

/* Body/Medium/400 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}

.contact-with-us-section{
    display: flex;
padding: 62px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
background: var(--Gray-50, #F2F4F5);
}

.contact-with-us-section .contact-with-us .card{
    border: none;
    display: flex;
/* padding: 32px; */
align-items: flex-start;
gap: 24px;
border-radius: 4px;
background: var(--Gray-00, #FFF);
box-shadow: 0px 24px 32px 0px rgba(25, 28, 31, 0.08);
}

.contact-with-us-section .contact-with-us .chat-icon-div{
    display: flex;
padding: 10px 20px;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 4px;
background: var(--Success-50, #EAF7E9);
}

.contact-with-us-section .contact-with-us .phone-contact .phone-icon-div{
    display: flex;
    padding: 10px 20px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 4px;
background: var(--Secondary-50, #EAF6FE);
}

.contact-with-us-section .contact-with-us .number{
    color: var(--Gray-900, #191C1F);

font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 28px; 
/* padding: 20px 0px; */
}

.contact-with-us-section .contact-with-us .call-now{
    display: inline-flex;
padding: 0px 20px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 2px;
background: var(--Secondary-500, #2DA5F3);
}

.contact-with-us-section .contact-with-us .call-now .text{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.contact-with-us-section .contact-with-us .call-now .icon svg{
    width: 18px;
height: 18px;
}

.contact-with-us-section .contact-with-us .contact-us-btn{
    display: inline-flex;
padding: 0px 10px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 2px;
background: var(--Success-500, #2DB224);
}

.contact-with-us-section .contact-with-us .contact-us-btn .text{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.contact-with-us-section .contact-with-us .phone-contact .phone-icon-div svg{
    width: 40px;
height: 40px;
}

.contact-with-us-section .contact-with-us .title{
    color: var(--Gray-900, #191C1F);

/* Body/Large/600 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
}

.contact-with-us-section .contact-with-us .description{
    color: var(--Gray-600, #5F6C72);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

}
/****************************************************Customer Support Media Queries End*************************************************/

/******************************************************About Us Page Media Queries******************************************************/
@media(min-width: 430px) AND (max-width: 768px){
    
.about-us-section .who-we-are a{
    display: inline-flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 2px;
background: var(--Secondary-500, #2DA5F3);

color: var(--Gray-00, #FFF);

/* Body/Small/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 142.857% */
margin-bottom: 10px;
}

.about-us-section .who-we-are .title{
    color: var(--Gray-900, #191C1F);

/* Display/04 */
font-family: "Public Sans";
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 48px; /* 120% */
}

.about-us-section .who-we-are .description{
    color: var(--Gray-700, #475156);

    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.about-us-section .who-we-are svg{
    width: 24px;
height: 24px;
}

.about-us-section .who-we-are span{
    color: var(--Gray-900, #191C1F);

    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.about-us-section .who-we-are img{
    /* width: 648px; */
    width: 100%;
height: 400px;
border-radius: 4px;
object-fit: cover;
}

.about-us-section  .core-team-member .card.profile{
    
border-radius: 3px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.about-us-section  .core-team-member .profile img{
    width: 50px;
height: 50px;
border-radius: 50%;
/* object-fit: cover; */
}

.about-us-section  .core-team-member .profile .name{
    color: var(--Gray-900, #191C1F);

    /* Body/Medium/600 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}

.about-us-section  .core-team-member .profile .designation{
    color: var(--Gray-700, #475156);

    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */

}

.about-us-section .banner{
    padding: 40px 0px;
}

.about-us-section .banner img{
    width: 100%;
    height: 440px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.00) 67.86%), url(<path-to-image>) lightgray 50% / cover no-repeat;
    object-fit: cover;
}

.about-us-section .banner .title{
    color: var(--Gray-900, #191C1F);

    /* Heading/01 */
    font-family: "Public Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 125% */
}

.about-us-section .banner .description{
    color: var(--Gray-900, #191C1F);

    /* Body/Large/400 */
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
}

.about-us-section .banner .play{
    display: inline-flex;
padding: 20px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
background: var(--Primary-500, #FA8232);
}

.about-us-section .banner .text-bg-dark {
    /* color:#fff!important; */
    /* background-color:RGBA(var(--bs-dark-rgb),var(--bs-bg-opacity,1))!important; */
}

.about-us-section .banner .card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--bs-card-img-overlay-padding);
    /* border-radius:var(--bs-card-inner-border-radius); */
}

}
/****************************************************About Us Page Media Queries End****************************************************/

/******************************************************Product Detail Page Media Queries***********************************************/
@media(min-width: 770px) AND (max-width: 1196px){
    .product-detail-page .quick-view .add-to-card{
        border:none;
        outline: none;
        display: flex;
        /* width: 264px; */
        /* max-width: 100%; */
        padding: 0px 10px;
        justify-content: center;
        align-items: center;
        gap: 5px;
        border-radius: 3px;
        background: var(--Primary-500, #FA8232);
        }
        
        .product-detail-page .quick-view .add-to-card .text{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 15px;
            font-style: normal;
            font-weight: 600;
            line-height: 53px;
            letter-spacing: 0.192px;
            text-transform: uppercase;
        }
        
        .product-detail-page .quick-view .add-to-card span svg{
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }
}

@media(min-width: 300px) AND (max-width: 768px){
    .product-detail-page .quick-view .thumbnails{
        position: relative;
        height: 100%;
    }
    
    /* .quick-view .thumbnails .main-carousel .splide__slide{
    width: 96px;
    height: 96px;
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    } */
    
    .product-detail-page .splide__track--nav>.splide__list>.splide__slide.is-active{
        border: none !important;
    }
    
    .product-detail-page .splide__track--nav>.splide__list>.splide__slide.is-active img{
        /* width: 100%;
        height: 100%; */
        border-radius: 2px;
        border: 2px solid var(--Primary-500, #FA8232);
    }
    
    .product-detail-page .quick-view .thumbnails .main-carousel .splide__slide .thumbnail-img{
        /* width: 100%;
        height: 100%; */
        border-radius: 2px;
        border: 1px solid var(--Gray-100, #E4E7E9);
    }
    
    .product-detail-page .quick-view .thumbnails #product-detail-main-carousel .splide__slide.is-active{
        /* width: 616px; */
        width: 100%;
        height: 364px;
        border-radius: 4px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        padding: 10px;
    }
    
    .product-detail-page .quick-view .thumbnails #product-detail-main-carousel .splide__slide.is-active img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    } 
    
    .product-detail-page .quick-view .thumbnails #product-detail-thumbnail-carousel .splide__slide{
        /* width: 616px; */
        width: 100%;
        height: 96px;
        border-radius: 3px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        /* padding: 10px; */
    }
    
    .product-detail-page .quick-view .thumbnails #product-detail-thumbnail-carousel .splide__slide.is-active{
        /* width: 616px; */
        width: 100%;
        height: 96px;
        border-radius: 3px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        /* padding: 10px; */
    }
    
    .product-detail-page .quick-view .thumbnails #product-detail-thumbnail-carousel .splide__slide img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    } 
    
    .product-detail-page .quick-view .thumbnails #product-detail-thumbnail-carousel .splide__slide.is-active img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    } 
    
    .product-detail-page .splide__track--nav>.splide__list>.splide__slide img{
        border-radius: 4px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        cursor: pointer;
        padding: 2px;
    }
    
    .product-detail-page .splide__arrow--prev{
    position: absolute;
    top: 50%;
    left: -5.5%;
    border: none;
    outline: none;
    display: flex;
    padding: 15px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    border: 2px solid var(--Gray-00, #FFF);
    opacity: 1 !important;
    background: var(--Primary-700, #FA8232) !important;
    }
    
    .product-detail-page .splide__arrow--prev i{
        /* width: 24px;
        height: 24px; */
        font-size: 18px;
        color: white;
    }
    
    .product-detail-page .splide__arrow--next{
        position: absolute;
        top: 50%;
        right: -6.5%;
        border: none;
        outline: none;
        display: flex;
        padding: 15px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 100px;
        border: 2px solid var(--Gray-00, #FFF);
        opacity: 1 !important;
        background: var(--Primary-700, #FA8232) !important;
        }
        
    .product-detail-page .splide__arrow--next i{
            /* width: 24px;
            height: 24px; */
            font-size: 18px;
            color: white;
    }
    
    .product-detail-page .quick-view .product-details .name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    padding-top: 3px;
    }
    
    .product-detail-page .quick-view .rating-review .rating svg{
    width: 18px;
    height: 18px;
    }
    
    .product-detail-page .quick-view .rating-review .rating .star{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    }
    
    .product-detail-page .quick-view .rating-review .review{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-left: 10px;
    }
    
    .product-detail-page .quick-view .product-details .common-1{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .product-detail-page .quick-view .product-details .common-2{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    }
    
    .product-detail-page .quick-view .product-details .common-2-color{
    color: var(--Success-500, #2DB224);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    }
    
    .product-detail-page .quick-view .product-details .price-off{
        padding-top: 10px;
        padding-bottom: 15px;
    }
    
    .product-detail-page .quick-view .product-details .price .current-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 28px;
    }
    
    .product-detail-page .quick-view .product-details .price .actual-price{
        color: var(--Gray-500, #77878F);
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 133.333% */
        text-decoration-line: strikethrough;
    }
    
    .product-detail-page .quick-view .product-details .off{
    display: flex;
    padding: 4px 8px;
    align-items: flex-start;
    gap:  8px;
    border-radius: 2px;
    background: var(--Warning-400, #EFD33D);
    margin-left: 5px;
    }
    
    .product-detail-page .quick-view .product-details .off span{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }
    
    .product-detail-page .quick-view .product-details .specification{
        padding-top: 12px;
    }
    
    /* .quick-view .product-details .specification select{
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    } */
    
    .product-detail-page .quick-view .product-details .specification label{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .product-detail-page .quick-view .product-details .specification select, select option{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .product-detail-page .quick-view .product-details .specification .form-check {
        display: inline-block;
    }
    
    .product-detail-page .quick-view .product-details .specification .form-check-label {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        box-sizing: border-box;
    }
    
    .product-detail-page .quick-view .product-details .specification .form-check-label.grey {
        background: #B1B5B8;
        box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
    }
    
    .product-detail-page .quick-view .product-details .specification .form-check-label.white {
        background: #E0E1E1;
        box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
    }
    
    .product-detail-page .quick-view .product-details .specification .form-check-input {
        display: none;
    }
    
    .product-detail-page .quick-view .product-details .specification .form-check-input:checked + .form-check-label {
        border-radius: 50%;
        outline: 2px solid var(--Primary-500, #FA8232);
        outline-offset: 3px;
    }
    
    .product-detail-page .quick-view .qty--add-to-card--buy-now{
        margin-left: 2px;
        padding-top: 5px;
        padding-bottom: 10px;
    }
    
    .product-detail-page .quick-view .qty{
    display: flex;
    /* padding: 16px 10px; */
    /* width: 164px; */
    height: 46px;
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;
    border: 2px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .product-detail-page .quick-view .qty .minus,.plus svg{
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
    }
    
    .product-detail-page .quick-view .qty .quantity-input{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    }
    
    .product-detail-page .quick-view .qty input:focus{
        outline: none;
        border: none;
    }
    
    .product-detail-page .quick-view .add-to-card{
    border:none;
    outline: none;
    display: flex;
    /* width: 264px; */
    /* max-width: 100%; */
    padding: 0px;
    justify-content: center;
    align-items: center;
    /* gap: 2px; */
    border-radius: 3px;
    background: var(--Primary-500, #FA8232);
    }
    
    .product-detail-page .quick-view .add-to-card .text{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 45px;
        letter-spacing: 0.192px;
        text-transform: uppercase;
    }
    
    .product-detail-page .quick-view .add-to-card span svg{
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    
    .product-detail-page .quick-view .buy-now{
    margin: 0;
    padding: 0;
    display: flex;
    /* padding: 0px 15px; */
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 0px;
    border-radius: 3px;
    border: 2px solid var(--Primary-500, #FA8232);
    }
    
    .product-detail-page .quick-view .buy-now span{
        color: var(--Primary-500, #FA8232);
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 40px;
        letter-spacing: 0.192px;
        text-transform: uppercase;
    }
    
    .product-detail-page .quick-view .wishlist-compare{
        display: flex;
        align-items: content;
        justify-content: start;
    }
    
    .product-detail-page .quick-view .add-to-compare{
        padding-left: 10px;
    }
    
    .product-detail-page .quick-view .add-to-wishlist .text,.add-to-compare .text{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .product-detail-page .quick-view .add-to-wishlist span svg,.add-to-compare span svg{
        width: 20px;
        height: 20px;
    }
    
    .product-detail-page .quick-view .share-product .text{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .product-detail-page .quick-view .share-product a{
        /* display: inline-flex;
    justify-content: evenly;
    align-items: center;
    gap: 16px; */
    padding-left: 3px;
    }
    
    .product-detail-page .quick-view .share-product a svg{
    width: 14px;
    height: 14px;
    color: #5F6C72;
    }
    
    .product-detail-page .quick-view .share-product a:hover svg{
        width: 14px;
        height: 14px;
        color: #FA8232;
    }
    
    .product-detail-page .quick-view .payment-card{
        padding: 10px 20px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        margin-top: 15px;
    }
    
    .product-detail-page .quick-view .payment-card .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .product-detail-page .quick-view .payment-card .payment-card-option{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: start;
    }
    
    .product-detail-page .quick-view .payment-card .payment-card-option img{
        width: 36px;
        height: 30px;
    }
    
    .additional-information{
        display: flex;
    padding-bottom: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .additional-information .nav-tabs {
        border: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 56px;
        /* background-color: #E4E7E9; */
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        border-radius: 4px;
        border-bottom: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
    }
    
    .additional-information .nav-tabs .nav-item{
        height: 100%;
        /* display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch; */
    }
    
    .additional-information .nav-tabs .nav-link {
        /* margin-bottom:calc(-1 * var(--bs-nav-tabs-border-width)); */
        /* border:var(--bs-nav-tabs-border-width) solid transparent; */
        /* border-top-left-radius:var(--bs-nav-tabs-border-radius); */
        /* border-top-right-radius:var(--bs-nav-tabs-border-radius); */
        border: none;
        margin: 0;
        padding: 0 10px;
        height: 100%;
    
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
    text-transform: uppercase;
    }
    
    .additional-information .nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active {
        color: var(--bs-nav-tabs-link-active-color);
        /* background-color: #E4E7E9; */
        /* border-color: var(--bs-nav-tabs-link-active-border-color); */
    
        color: var(--Gray-900, #191C1F);
    
    /* Label/03 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    text-transform: uppercase;
    
    border-bottom: 2px solid #FA8232;
    }
    
    .additional-information .paragraph{
        /* padding: 0px 50px; */
        padding-left: 30px;
        padding-right: 8px;
    }
    
    .additional-information .paragraph .title{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }
    
    .additional-information .paragraph p{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .additional-information .feature .title{
        color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    }
    
    .additional-information .feature .text{
        color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
    }
    
    .additional-information .feature .icon svg{
        width: 18px;
    height: 18px;
    }
    
    .additional-information .hr-line{
        width: 1px;
    height: 228px;
    background: #E4E7E9;
    }
    
    /* .additional-information .shipping-information{
        padding-left: 10px;
    } */
    
    .additional-information .shipping-information .title{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
    }
    
    .additional-information .shipping-information .type{
        color: var(--Gray-900, #191C1F);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; 
    }
    
    .additional-information .shipping-information .text{
        color: var(--Gray-600, #5F6C72);
    
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }
    
    
    .product-detail-page .related-product{
        padding: 60px 0px;
    }
    
    .product-detail-page .related-product .title{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        }
        
    .product-detail-page .related-product .product-details .card{
            display: flex;
            padding: 5px;
            justify-content: center;
            align-items: center;
            gap: 3px;
            border-radius: 3px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
        }
        
    .product-detail-page .related-product .product-details .card img{
            width: 60px;
            height: 60px;
        }
        
    .product-detail-page .related-product .product-details .card .product-name{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px; 
    }
        
    .product-detail-page .related-product .product-details .card .product-price{
            color: var(--Secondary-500, #2DA5F3);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px; 
    }
    
}

@media(min-width: 300px) AND (max-width: 425px){

    
.additional-information{
display: flex;
padding-bottom: 40px;
flex-direction: column;
flex-wrap: wrap;
justify-content: start;
align-items: start;
gap: 40px;
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

    .additional-information .nav-tabs {
        border: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        /* background-color: #E4E7E9; */
        display: flex;
        align-items: center;
        justify-content: start;
        align-self: stretch;
        border-radius: 4px;
        border-bottom: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
    }
    
    .additional-information .nav-tabs .nav-item{
        /* height: 100%; */
        /* display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch; */
    }
    
    .additional-information .nav-tabs .nav-link {
        /* margin-bottom:calc(-1 * var(--bs-nav-tabs-border-width)); */
        /* border:var(--bs-nav-tabs-border-width) solid transparent; */
        /* border-top-left-radius:var(--bs-nav-tabs-border-radius); */
        /* border-top-right-radius:var(--bs-nav-tabs-border-radius); */
        border: none;
        margin: 0;
        padding: 0 3px;
        /* height: 100%; */
    
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
    text-transform: uppercase;
    padding-bottom: 10px;
    }
    
    .additional-information .nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active {
        color: var(--bs-nav-tabs-link-active-color);
        /* background-color: #E4E7E9; */
        /* border-color: var(--bs-nav-tabs-link-active-border-color); */
    
        color: var(--Gray-900, #191C1F);
    
    /* Label/03 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    text-transform: uppercase;
    
    border-bottom: 2px solid #FA8232;
    }

    .breadcrumb{
        display: flex;
        width: 100%;
        height: 45px;
        /* padding: 0px 1242px 0px 300px; */
        padding-top:12px;
        align-items: center;
        background: var(--Gray-50, #F2F4F5);
    }
        
    .breadcrumb svg{
        width: 18px;
        height: 18px;
    }
        
    .breadcrumb .text{
            color: var(--Gray-600, #5F6C72);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
    }
        
    .breadcrumb .current-text{
            color: var(--Secondary-500, #2DA5F3);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px; 
    }

}
/****************************************************Product Detail Page Media Queries End*********************************************/

/*********************************************************Shop Page Media queries******************************************************/
@media(min-width: 770px) AND (max-width: 1196px){
    .breadcrumb{
        display: flex;
        width: 100%;
        height: 45px;
        /* padding: 0px 1242px 0px 300px; */
        padding-top:12px;
        align-items: center;
        background: var(--Gray-50, #F2F4F5);
    }
        
    .breadcrumb svg{
        width: 20px;
        height: 20px;
    }
        
    .breadcrumb .text{
            color: var(--Gray-600, #5F6C72);
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
    }
        
    .breadcrumb .current-text{
            color: var(--Secondary-500, #2DA5F3);
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px; 
    }
        
    .shop-page-section{
            background: #FFF;
    }
        
    .shop-page{
            padding: 30px 0px;
    }
        
    .shop-page .title{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            text-transform: uppercase;
    }
        
    .shop-page  label{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        padding-left: 5px;
    }
        
    .shop-page .category label.active{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
            padding-left: 3px;
    }
        
    .shop-page input[type="radio"]{
            width: 18px;
            height: 18px;
            /* border-radius: 100px;
            border: 1px solid var(--Gray-200, #C9CFD2);
            background: var(--Gray-00, #FFF);
        } */
        }
        
    .shop-page .form-check-input:focus {
            outline: none;
            border:none;
    }
        
        
    .shop-page .form-check-input:checked {
            outline: none;
            background-color: var(--Primary-500, #FA8232);
            border-color: var(--Primary-500, #FA8232);
    }
        
    .shop-page .shop-page-sidebar .hr-line{
        /* width: 312px; */
        width: 100%;
        height: 1px;
        background: #E4E7E9;
        margin: 20px 0px; 
    }
        
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
        
        .price-range-slider{
          display: flex;
          align-items: center;
          justify-content: center;
          /* min-height: 100vh; */
          /* background: #17a2b8; */
          box-sizing: border-box;
          font-family: "Poppins", sans-serif;
        }
        ::selection {
          color: #fff;
          background: #17a2b8;
        }
        .wrapper {
          /* width: 100%; */
          /* background: #fff; */
          /* border-radius: 10px; */
          /* padding: 20px 25px 40px; */
          /* box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); */
        }
        header h2 {
          font-size: 24px;
          font-weight: 600;
        }
        header p {
          margin-top: 5px;
          font-size: 16px;
        }
        .price-input {
          width: 100%;
          display: flex;
          /* margin: 30px 0 35px; */
          margin: 20px 0;
        }
        .price-input .field {
          display: flex;
          width: 100%;
          height: 45px;
          align-items: center;
        }
        
        .field input {
          width: 100%;
          height: 100%;
          outline: none;
          font-size: 16px;
          /* margin-left: 12px; */
          border-radius: 5px;
          text-align: center;
          border: 1px solid #999;
          -moz-appearance: textfield;
        }
        
        .field input.input-max {
            margin-left: 12px;
        }
        
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }
        .price-input .separator {
          width: 130px;
          display: flex;
          font-size: 16px;
          align-items: center;
          justify-content: center;
        }
        .slider {
          height: 5px;
          position: relative;
          background: #ddd;
          border-radius: 5px;
          margin-top: 10px;
        }
        .slider .progress {
          height: 100%;
          left: 25%;
          right: 25%;
          /* right: 48%; */
          position: absolute;
          border-radius: 5px;
          /* background: #17a2b8; */
          background: #FA8232;
        }
        .range-input {
          position: relative;
        }
        .range-input input {
          position: absolute;
          width: 100%;
          height: 5px;
          top: -5px;
          background: none;
          pointer-events: none;
          -webkit-appearance: none;
          -moz-appearance: none;
        }
        input[type="range"]::-webkit-slider-thumb {
          height: 17px;
          width: 17px;
          border-radius: 50%;
          /* background: #17a2b8; */
          background: var(--Gray-00, #FFF);
          background: var(--Gray-00, #FA8232);
          border:2px var(--Primary-500, #FA8232) !important;
          pointer-events: auto;
          -webkit-appearance: none;
          box-shadow: 0 0 6px rgba(#FA8232, 0.5);
        }
        input[type="range"]::-moz-range-thumb {
          height: 17px;
          width: 17px;
          border: none;
          border-radius: 50%;
          background: var(--Gray-00, #FFF);
          background: var(--Gray-00, #FA8232);
          border:2px var(--Primary-500, #FA8232) !important;
          pointer-events: auto;
          -moz-appearance: none;
          box-shadow: 0 0 6px rgba(#FA8232, 0.5);
        }
        
        .shop-page input[type="checkbox"]{
        width: 20px;
        height: 20px;
        border-radius: 2px;
        /* border: 1px solid var(--Gray-200, #C9CFD2);
        background: var(--Gray-00, #FFF); */
        }
        
        .popular-tag-div{
            margin-bottom: 20px;
        }
        
        .popular-tag .tag{
        display: inline-flex;
        flex-wrap: wrap;
        padding: 6px 12px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 2px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        margin-bottom: 10px;
        
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        }
        
        .shop-page-sidebar-banner{
            display: flex;
        padding: 26px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* gap: 24px; */
        border-radius: 4px;
        border: 4px solid var(--Primary-100, #FFE7D6);
        background: var(--Gray-00, #FFF);
        }
        
        .shop-page-sidebar-banner .category {
            padding-top: 12px;
        }
        
        .shop-page-sidebar-banner .category .text{
            color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        }
        
        .shop-page-sidebar-banner .category icon svg{
            width:  22px;
            height: 22px;
        }
        
        .shop-page-sidebar-banner .type{
        
            color: var(--Gray-900, #FA8232);
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            /* line-height: 20px; */
            padding-top: 3px;
        }
        
        .shop-page-sidebar-banner .name{
        color: var(--Gray-900, #191C1F);
        text-align: center;
        font-family: "Public Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 32px;
        }
        
        .shop-page-sidebar-banner .price-div{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        
        .shop-page-sidebar-banner .price-div .text{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        }
        
        .shop-page-sidebar-banner .price-div .price{
            display: flex;
            padding: 5px 10px;
            align-items: flex-start;
            gap: 8px;
            border-radius: 3px;
            background: var(--Warning-300, #F3DE6D);
        
        color: var(--Gray-900, #191C1F);
        text-align: center;
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        }
        
        .shop-page-sidebar-banner .add-to-cart{
            border: none;
            outline:none;
            display: flex;
            width: 100%;
            padding: 0px 20px;
            justify-content: center;
            align-items: center;
            gap: 5px;
            border-radius: 2px;
            background: var(--Primary-500, #FA8232);
            margin: 12px 0;
        }
        
        .shop-page-sidebar-banner .add-to-cart svg{
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }
        
        .shop-page-sidebar-banner .add-to-cart .text{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 13px;
            font-style: normal;
            font-weight: 600;
            line-height: 40px;
            letter-spacing: 0.168px;
            text-transform: uppercase;
            margin-top: 1px;
        }
        
        .shop-page-sidebar-banner .view-details{
            display: flex;
            width: 100%;
            padding: 0px 18px;
            justify-content: center;
            align-items: center;
            gap: 3px;
            border-radius: 2px;
            border: 2px solid var(--Primary-500, #FA8232);
            color: var(--Primary-500, #FA8232);
        
            font-family: "Public Sans";
            font-size: 13px;
            font-style: normal;
            font-weight: 500;
            line-height: 35px; /* 342.857% */
            letter-spacing: 0.168px;
            text-transform: uppercase;
        }
        
        .sidebar-btn{
            border:none;
            outline:none;
            display: flex;
            width: 100%;
            padding: 0px 24px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 5px;
            background: var(--Primary-500, #1B6392);
            margin: 10px 0;
        
        color: var(--Gray-00, #FFF);
        
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px; /* 342.857% */
        letter-spacing: 0.168px;
        text-transform: uppercase;
        }
        
        .sidebar-btn svg{
            height: 22px;
            width: 22px;
            color: white;
        }
        
        .shop-page-search{
        display: flex;
        width: 100%;
        height: 44px;
        /* padding: 12px 16px; */
        justify-content: start;
        align-items: center;
        /* gap: 8px; */
        border-radius: 2px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
        }
        
        .shop-page-search .search-box {
            width: 93%;
            height: 100%;
            padding:  0 10px;
        }
        
        .shop-page-search .search-box input[type="text"]{
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            font-size: 16px;
            font-family: "Public Sans";
            font-weight: 400;
            line-height: 20px;
            text-align: start;
        }
        
        .shop-page-search .filter select{
        display: flex;
        width: 180px;
        height: 44px;
        padding: 12px 16px;
        justify-content: center;
        align-items: center;
        gap: 45px;
        border-radius: 2px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
        }
        
        .shop-page .active-filter{
            display: flex;
            flex-wrap: wrap;
        /* width: 984px; */
        width: 100%;
        padding: 12px 24px;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        background: var(--Gray-50, #F2F4F5);
        margin: 20px 0;
        margin-left: 10px;
        margin-right: 10px;
        }
        
        .shop-page .active-filters-text{
            color: var(--Gray-600, #5F6C72);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        }
        
        .shop-page .show-filters .name{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }
        
        .shop-page .show-filters .close-icon{
            width: 14px;
            height: 14px;
        }
        
        .shop-page .search-found .found-count{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        }
        
        .shop-page .search-found .text{
            color: var(--Gray-600, #5F6C72);
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        }
        
        
        
        .shop-page-product .featured-product-card{
            position: relative; 
            overflow: hidden;
            /* width: 248px; */
            width: 100%;
            height: 320px;
            border-radius: 3px;
            border: 1px solid var(--Gray-100, #E4E7E9);
            background: var(--Gray-00, #FFF);
            transition: all 0.3s ease-in-out;
        }
        
        .shop-page-product .featured-product-card .card .card-body{
            margin: 0;
            padding: 0;
            padding: 15px;
        }
        
        .shop-page-product .featured-product-card .image-container {
                position: relative;
        }
            
        .shop-page-product .featured-product-card .image-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
                opacity: 0;
                transition: opacity 0.3s ease;
        }
            
        .shop-page-product .featured-product-card:hover .image-overlay {
                opacity: 1;
        }
            
        .shop-page-product .featured-product-card:hover .wishlist-cart-preview {
                display: flex !important;
        }
        
        .shop-page-product .featured-product-card:hover{
                border-radius: 3px;
                border: 1px solid var(--Gray-200, #C9CFD2);
                background: var(--Gray-00, #FFF);
                box-shadow: 0px 8px 24px 0px rgba(25, 28, 31, 0.12);
        }
            
        .shop-page-product .featured-product-card .sold-out-tag{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 5px 10px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 2px;
            background: var(--Gray-400, #929FA5);
        }
            
        .shop-page-product .featured-product-card .sold-out-tag span{
                color: var(--Gray-00, #FFF);
            
                /* Body/Tiny/600 */
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px; /* 133.333% */
        }
            
        .shop-page-product .featured-product-card .off{
                position: absolute;
                top: 10px;
                left: 10px;
                display: inline-flex;
                padding: 5px 10px;
                align-items: flex-start;
                gap: 10px;
                border-radius: 2px;
                background: var(--Warning-400, #EFD33D);
        }
            
        .shop-page-product .featured-product-card .off span{
                color: var(--Gray-900, #191C1F);
            
                /* Body/Tiny/600 */
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px; /* 133.333% */
        }
            
        .shop-page-product .featured-product-card .hot-tag{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 5px 10px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 2px;
            background: var(--Danger-500, #EE5858);
        }
            
        .shop-page-product .featured-product-card .hot-tag span{
                color: var(--Gray-00, #FFF);
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px; 
        }
        
        .shop-page-product .featured-product-card .best-deals-tag{
                position: absolute;
                top: 10px;
                left: 10px;
                display: inline-flex;
                padding: 5px 10px;
                align-items: flex-start;
                gap: 10px;
                border-radius: 2px;
                background: var(--Secondary-500, #2DA5F3);
        }
                
        .shop-page-product .featured-product-card .best-deals-tag span{
                color: var(--Gray-00, #FFF);
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px;
        }
        
        .shop-page-product .featured-product-card .sale{
                position: absolute;
                top: 10px;
                left: 10px;
                display: inline-flex;
                padding: 5px 10px;
                align-items: flex-start;
                gap: 10px;
                border-radius: 2px;
                background: var(--Success-500, #2DB224);
        }
                
        .shop-page-product .featured-product-card .sale span{
                color: var(--Gray-00, #FFF);
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px; 
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview{
                position: absolute;
                top: 27%;
                left: 11%;
                display: none;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon{
            display: flex;
            /* padding: 12px; */
            width: 40px !important;
            height: 40px !important;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 50%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 5px;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon{
                display: flex;
                /* padding: 12px; */
                width: 40px;
                height: 40px;
                align-items: center;
                justify-content: center;
                gap: 8px;
                border-radius: 50%;
                /* background: var(--Gray-00, #62a7c2); */
                background: var(--Gray-00, #FFF);
                margin: 0 5px;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon{
                    display: flex;
                    /* padding: 12px; */
                    width: 40px;
                    height: 40px;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    border-radius: 100%;
                    /* background: var(--Gray-00, #62a7c2); */
                    background: var(--Gray-00, #FFF);
                    margin: 0 5px;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon svg{
            width: 20px;
            height: 20px;
            color: black;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon svg{
                width: 20px;
                height: 20px;
                color: black;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon svg{
                    width: 20px;
                    height: 20px;
                    color: black;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover {
                background: var(--Primary-500, #FA8232);
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon:hover {
                background: var(--Primary-500, #FA8232);
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon:hover {
                background: var(--Primary-500, #FA8232);
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
                color: white;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon:hover svg{
                color: white;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon:hover svg{
                color: white;
        }
            
        .shop-page-product .featured-product-card img{
                /* width: 216px; */
            width: 100%;
            height: 155px;
            flex-shrink: 0;
        }
            
        .shop-page-product .featured-product-card .product-name{
                color: var(--Gray-900, #191C1F);
                font-family: "Public Sans";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 20px;
        }
            
        .shop-page-product .featured-product-card .actual-price{
                color: var(--Gray-400, #929FA5);
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
            text-decoration-line: strikethrough;
            padding-top: 5px;
        }
            
        .shop-page-product .featured-product-card .product-price{
                color: var(--Secondary-500, #2DA5F3);
                font-family: "Public Sans";
                font-size: 14px;
                font-style: normal;
                font-weight: 600;
                line-height: 20px;
                padding-top: 5px;
        }
        
        .shop-page-product .featured-product-card .rating{
                padding: 5px 0px;
        }
            
        .shop-page-product .featured-product-card .rating .icon svg{
                width: 16px;
                height: 16px;
        }
            
        .shop-page-product .featured-product-card .rating .count{
                color: var(--Gray-500, #77878F);
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 16px;
        }
        
        .shop-page-pagination{
            padding: 30px 0px;
        }
        
        .shop-page-pagination .pagination{
            display: flex;
            padding: 10px 0px;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        
        .shop-page-pagination .pagination .prev{
            display: flex;
            padding: 8px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 100px;
            border: 1.5px solid var(--Primary-500, #FA8232);
        }
        
        .shop-page-pagination .pagination .next{
            display: flex;
            padding: 8px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 100px;
            border: 1.5px solid var(--Primary-500, #FA8232);
        }
        
        .shop-page-pagination .pagination .prev svg{
            width: 24px;
            height: 24px;
        }
        
        .shop-page-pagination .pagination .next svg{
            width: 24px;
            height: 24px;
        }
        
        .shop-page-pagination .pagination .page{
            display: flex;
        /* padding: 8px; */
        width: 45px;
        height: 45px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 100px;
        border: 1.5px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
        
        color: var(--Gray-900, #191C1F);
        text-align: center;
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        transition: 0.3 all ease-in-out;
        }
        
        .shop-page-pagination .pagination .page:hover{
            background: var(--Primary-500, #FA8232);
            color: var(--Gray-00, #FFF);
        }
        
}
@media(min-width: 430px) AND (max-width: 768px){
    .breadcrumb{
        display: flex;
        width: 100%;
        height: 40px;
        /* padding: 0px 1242px 0px 300px; */
        padding-top:12px;
        align-items: center;
        background: var(--Gray-50, #F2F4F5);
    }
        
    .breadcrumb svg{
        width: 18px;
        height: 18px;
    }
        
    .breadcrumb .text{
            color: var(--Gray-600, #5F6C72);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
    }
        
    .breadcrumb .current-text{
            color: var(--Secondary-500, #2DA5F3);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px; 
    }
        
    .shop-page-section{
            background: #FFF;
    }
        
    .shop-page{
            padding: 30px 0px;
    }
        
    .shop-page .title{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            text-transform: uppercase;
    }
        
    .shop-page  label{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        padding-left: 5px;
    }
        
    .shop-page .category label.active{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
            padding-left: 3px;
    }
        
    .shop-page input[type="radio"]{
            width: 16px;
            height: 16px;
            /* border-radius: 100px;
            border: 1px solid var(--Gray-200, #C9CFD2);
            background: var(--Gray-00, #FFF);
        } */
        }
        
    .shop-page .form-check-input:focus {
            outline: none;
            border:none;
    }
        
        
    .shop-page .form-check-input:checked {
            outline: none;
            background-color: var(--Primary-500, #FA8232);
            border-color: var(--Primary-500, #FA8232);
    }
        
    .shop-page .shop-page-sidebar .hr-line{
        /* width: 312px; */
        width: 100%;
        height: 1px;
        background: #E4E7E9;
        margin: 20px 0px; 
    }
        
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
        
        .price-range-slider{
          display: flex;
          align-items: center;
          justify-content: center;
          /* min-height: 100vh; */
          /* background: #17a2b8; */
          box-sizing: border-box;
          font-family: "Poppins", sans-serif;
        }
        ::selection {
          color: #fff;
          background: #17a2b8;
        }
        .wrapper {
          /* width: 100%; */
          /* background: #fff; */
          /* border-radius: 10px; */
          /* padding: 20px 25px 40px; */
          /* box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); */
        }
        header h2 {
          font-size: 24px;
          font-weight: 600;
        }
        header p {
          margin-top: 5px;
          font-size: 16px;
        }
        .price-input {
          width: 100%;
          display: flex;
          /* margin: 30px 0 35px; */
          margin: 20px 0;
        }
        .price-input .field {
          display: flex;
          width: 100%;
          height: 45px;
          align-items: center;
        }
        
        .field input {
          width: 100%;
          height: 100%;
          outline: none;
          font-size: 14px;
          /* margin-left: 12px; */
          border-radius: 5px;
          text-align: center;
          border: 1px solid #999;
          -moz-appearance: textfield;
        }
        
        .field input.input-max {
            margin-left: 12px;
        }
        
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }
        .price-input .separator {
          width: 130px;
          display: flex;
          font-size: 14px;
          align-items: center;
          justify-content: center;
        }
        .slider {
          height: 5px;
          position: relative;
          background: #ddd;
          border-radius: 5px;
          margin-top: 10px;
        }
        .slider .progress {
          height: 100%;
          left: 25%;
          right: 25%;
          /* right: 48%; */
          position: absolute;
          border-radius: 5px;
          /* background: #17a2b8; */
          background: #FA8232;
        }
        .range-input {
          position: relative;
        }
        .range-input input {
          position: absolute;
          width: 100%;
          height: 5px;
          top: -5px;
          background: none;
          pointer-events: none;
          -webkit-appearance: none;
          -moz-appearance: none;
        }
        input[type="range"]::-webkit-slider-thumb {
          height: 12px;
          width: 12px;
          border-radius: 50%;
          /* background: #17a2b8; */
          background: var(--Gray-00, #FFF);
          background: var(--Gray-00, #FA8232);
          border:2px var(--Primary-500, #FA8232) !important;
          pointer-events: auto;
          -webkit-appearance: none;
          box-shadow: 0 0 6px rgba(#FA8232, 0.5);
        }
        input[type="range"]::-moz-range-thumb {
          height: 12px;
          width: 12px;
          border: none;
          border-radius: 50%;
          background: var(--Gray-00, #FFF);
          background: var(--Gray-00, #FA8232);
          border:2px var(--Primary-500, #FA8232) !important;
          pointer-events: auto;
          -moz-appearance: none;
          box-shadow: 0 0 6px rgba(#FA8232, 0.5);
        }
        
        .shop-page input[type="checkbox"]{
        width: 18px;
        height: 18px;
        border-radius: 2px;
        /* border: 1px solid var(--Gray-200, #C9CFD2);
        background: var(--Gray-00, #FFF); */
        }
        
        .popular-tag-div{
            margin-bottom: 18px;
        }
        
        .popular-tag .tag{
        display: inline-flex;
        flex-wrap: wrap;
        padding: 5px 10px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 2px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        margin-bottom: 10px;
        
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        }
        
        .shop-page-sidebar-banner{
            display: flex;
        padding: 22px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* gap: 24px; */
        border-radius: 4px;
        border: 4px solid var(--Primary-100, #FFE7D6);
        background: var(--Gray-00, #FFF);
        }
        
        .shop-page-sidebar-banner .category {
            padding-top: 12px;
        }
        
        .shop-page-sidebar-banner .category .text{
            color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        }
        
        .shop-page-sidebar-banner .category icon svg{
            width:  20px;
            height: 20px;
        }
        
        .shop-page-sidebar-banner .type{
        
            color: var(--Gray-900, #FA8232);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            /* line-height: 20px; */
            padding-top: 3px;
        }
        
        .shop-page-sidebar-banner .name{
        color: var(--Gray-900, #191C1F);
        text-align: center;
        font-family: "Public Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 32px;
        }
        
        .shop-page-sidebar-banner .price-div{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        
        .shop-page-sidebar-banner .price-div .text{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        }
        
        .shop-page-sidebar-banner .price-div .price{
            display: flex;
            padding: 4px 2px;
            align-items: flex-start;
            gap: 1px;
            border-radius: 3px;
            background: var(--Warning-300, #F3DE6D);
        
        color: var(--Gray-900, #191C1F);
        text-align: center;
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        }
        
        .shop-page-sidebar-banner .add-to-cart{
            border: none;
            outline:none;
            display: flex;
            width: 100%;
            padding: 0px 2px;
            justify-content: center;
            align-items: center;
            gap: 2px;
            border-radius: 2px;
            background: var(--Primary-500, #FA8232);
            margin: 12px 0;
        }
        
        .shop-page-sidebar-banner .add-to-cart svg{
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }
        
        .shop-page-sidebar-banner .add-to-cart .text{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 30px;
            letter-spacing: 0.168px;
            text-transform: uppercase;
            margin-top: 1px;
        }
        
        .shop-page-sidebar-banner .view-details{
            display: flex;
            width: 100%;
            padding: 0px 0px;
            justify-content: center;
            align-items: center;
            gap: 2px;
            border-radius: 2px;
            border: 2px solid var(--Primary-500, #FA8232);
            color: var(--Primary-500, #FA8232);
        
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 500;
            line-height: 30px; /* 342.857% */
            letter-spacing: 0.168px;
            text-transform: uppercase;
        }
        
        .shop-page-sidebar-banner .view-details svg{
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        .sidebar-btn{
            border:none;
            outline:none;
            display: flex;
            width: 100%;
            padding: 0px 24px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 5px;
            background: var(--Primary-500, #1B6392);
            margin: 10px 0;
        
        color: var(--Gray-00, #FFF);
        
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 48px; /* 342.857% */
        letter-spacing: 0.168px;
        text-transform: uppercase;
        }
        
        .sidebar-btn svg{
            height: 22px;
            width: 22px;
            color: white;
        }
        
        .shop-page-search{
        display: flex;
        width: 100%;
        height: 44px;
        /* padding: 12px 16px; */
        justify-content: start;
        align-items: center;
        /* gap: 8px; */
        border-radius: 2px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
        }
        
        .shop-page-search .search-box {
            width: 90%;
            height: 100%;
            padding:  0 10px;
        }
        
        .shop-page-search .search-box input[type="text"]{
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            font-size: 14px;
            font-family: "Public Sans";
            font-weight: 400;
            line-height: 20px;
            text-align: start;
        }
        
        .shop-page-search .filter select{
        display: flex;
        width: 180px;
        height: 44px;
        padding: 12px 16px;
        justify-content: center;
        align-items: center;
        gap: 45px;
        border-radius: 2px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
        font-size: 14px;
        }
        
        .shop-page .active-filter{
            display: flex;
            flex-wrap: wrap;
        /* width: 984px; */
        width: 100%;
        padding: 12px 24px;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        background: var(--Gray-50, #F2F4F5);
        margin: 20px 0;
        margin-left: 10px;
        margin-right: 10px;
        }
        
        .shop-page .active-filters-text{
            color: var(--Gray-600, #5F6C72);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        }
        
        .shop-page .show-filters .name{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }
        
        .shop-page .show-filters .close-icon{
            width: 14px;
            height: 14px;
        }
        
        .shop-page .search-found .found-count{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        }
        
        .shop-page .search-found .text{
            color: var(--Gray-600, #5F6C72);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        }
        
        
        
        .shop-page-product .featured-product-card{
            position: relative; 
            overflow: hidden;
            /* width: 248px; */
            width: 100%;
            height: 320px;
            border-radius: 3px;
            border: 1px solid var(--Gray-100, #E4E7E9);
            background: var(--Gray-00, #FFF);
            transition: all 0.3s ease-in-out;
        }
        
        .shop-page-product .featured-product-card .card .card-body{
            margin: 0;
            padding: 0;
            padding: 8px;
        }
        
        .shop-page-product .featured-product-card .image-container {
                position: relative;
        }
            
        .shop-page-product .featured-product-card .image-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
                opacity: 0;
                transition: opacity 0.3s ease;
        }
            
        .shop-page-product .featured-product-card:hover .image-overlay {
                opacity: 1;
        }
            
        .shop-page-product .featured-product-card:hover .wishlist-cart-preview {
                display: flex !important;
        }
        
        .shop-page-product .featured-product-card:hover{
                border-radius: 3px;
                border: 1px solid var(--Gray-200, #C9CFD2);
                background: var(--Gray-00, #FFF);
                box-shadow: 0px 8px 24px 0px rgba(25, 28, 31, 0.12);
        }
            
        .shop-page-product .featured-product-card .sold-out-tag{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 4px 8px;
            align-items: flex-start;
            gap: 8px;
            border-radius: 2px;
            background: var(--Gray-400, #929FA5);
        }
            
        .shop-page-product .featured-product-card .sold-out-tag span{
                color: var(--Gray-00, #FFF);
            
                /* Body/Tiny/600 */
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px; /* 133.333% */
        }
            
        .shop-page-product .featured-product-card .off{
                position: absolute;
                top: 10px;
                left: 10px;
                display: inline-flex;
                padding: 4px 8px;
                align-items: flex-start;
                gap: 8px;
                border-radius: 2px;
                background: var(--Warning-400, #EFD33D);
        }
            
        .shop-page-product .featured-product-card .off span{
                color: var(--Gray-900, #191C1F);
            
                /* Body/Tiny/600 */
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px; /* 133.333% */
        }
            
        .shop-page-product .featured-product-card .hot-tag{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 4px 8px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 2px;
            background: var(--Danger-500, #EE5858);
        }
            
        .shop-page-product .featured-product-card .hot-tag span{
                color: var(--Gray-00, #FFF);
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px; 
        }
        
        .shop-page-product .featured-product-card .best-deals-tag{
                position: absolute;
                top: 10px;
                left: 10px;
                display: inline-flex;
                padding: 4px 8px;
                align-items: flex-start;
                gap: 10px;
                border-radius: 2px;
                background: var(--Secondary-500, #2DA5F3);
        }
                
        .shop-page-product .featured-product-card .best-deals-tag span{
                color: var(--Gray-00, #FFF);
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 16px;
        }
        
        .shop-page-product .featured-product-card .sale{
                position: absolute;
                top: 10px;
                left: 10px;
                display: inline-flex;
                padding: 4px 8px;
                align-items: flex-start;
                gap: 10px;
                border-radius: 2px;
                background: var(--Success-500, #2DB224);
        }
                
        .shop-page-product .featured-product-card .sale span{
                color: var(--Gray-00, #FFF);
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: 16px; 
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview{
                position: absolute;
                top: 27%;
                left: 5%;
                display: none;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon{
            display: flex;
            /* padding: 12px; */
            width: 30px !important;
            height: 30px !important;
            align-items: center;
            justify-content: center;
            gap: 2px;
            border-radius: 50%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 2px;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon{
                display: flex;
                /* padding: 12px; */
                width: 30px;
                height: 30px;
                align-items: center;
                justify-content: center;
                gap: 3px;
                border-radius: 50%;
                /* background: var(--Gray-00, #62a7c2); */
                background: var(--Gray-00, #FFF);
                margin: 0 2px;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon{
                    display: flex;
                    /* padding: 12px; */
                    width: 30px;
                    height: 30px;
                    align-items: center;
                    justify-content: center;
                    gap: 3px;
                    border-radius: 100%;
                    /* background: var(--Gray-00, #62a7c2); */
                    background: var(--Gray-00, #FFF);
                    margin: 0 2px;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon svg{
            width: 14px;
            height: 14px;
            color: black;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon svg{
                width: 14px;
                height: 14px;
                color: black;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon svg{
                    width: 14px;
                    height: 14px;
                    color: black;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover {
                background: var(--Primary-500, #FA8232);
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon:hover {
                background: var(--Primary-500, #FA8232);
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon:hover {
                background: var(--Primary-500, #FA8232);
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
                color: white;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .cart-icon:hover svg{
                color: white;
        }
            
        .shop-page-product .featured-product-card .wishlist-cart-preview .preview-icon:hover svg{
                color: white;
        }
            
        .shop-page-product .featured-product-card img{
                /* width: 216px; */
            width: 100%;
            height: 140px;
            flex-shrink: 0;
        }
            
        .shop-page-product .featured-product-card .product-name{
                color: var(--Gray-900, #191C1F);
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 20px;
        }
            
        .shop-page-product .featured-product-card .actual-price{
                color: var(--Gray-400, #929FA5);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px; /* 142.857% */
            text-decoration-line: strikethrough;
            padding-top: 3px;
        }
            
        .shop-page-product .featured-product-card .product-price{
                color: var(--Secondary-500, #2DA5F3);
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 600;
                line-height: 18px;
                padding-top: 3px;
        }
        
        .shop-page-product .featured-product-card .rating{
                padding: 3px 0px;
        }
            
        .shop-page-product .featured-product-card .rating .icon svg{
                width: 14px;
                height: 14px;
        }
            
        .shop-page-product .featured-product-card .rating .count{
                color: var(--Gray-500, #77878F);
                font-family: "Public Sans";
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 16px;
        }
        
        .shop-page-pagination{
            padding: 30px 0px;
        }
        
        .shop-page-pagination .pagination{
            display: flex;
            padding: 10px 0px;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        
        .shop-page-pagination .pagination .prev{
            display: flex;
            padding: 5px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 100px;
            border: 1.5px solid var(--Primary-500, #FA8232);
        }
        
        .shop-page-pagination .pagination .next{
            display: flex;
            padding: 5px;
            align-items: flex-start;
            gap: 10px;
            border-radius: 100px;
            border: 1.5px solid var(--Primary-500, #FA8232);
        }
        
        .shop-page-pagination .pagination .prev svg{
            width: 20px;
            height: 20px;
        }
        
        .shop-page-pagination .pagination .next svg{
            width: 20px;
            height: 20px;
        }
        
        .shop-page-pagination .pagination .page{
            display: flex;
        /* padding: 8px; */
        width: 35px;
        height: 35px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 100px;
        border: 1.5px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
        
        color: var(--Gray-900, #191C1F);
        text-align: center;
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        transition: 0.3 all ease-in-out;
        }
        
        .shop-page-pagination .pagination .page:hover{
            background: var(--Primary-500, #FA8232);
            color: var(--Gray-00, #FFF);
        }
        
}
/*******************************************************Shop Page Media queries End****************************************************/

/******************************************************Quick View Media Queries********************************************************/
@media(min-width: 770px) AND (max-width: 1196px){

.quick-view-modal .modal-body{
    position: relative;
}

.quick-view-modal .btn-close{

    position: absolute;
    top: 1%;
    right: -7%;
    z-index: 100;

display: inline-flex;
padding: 12px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.12);
}

.quick-view-modal .btn-close svg{
width: 24px;
height: 24px;
}

.quick-view .thumbnails{
    position: relative;
    height: 100%;
}

/* .quick-view .thumbnails .main-carousel .splide__slide{
width: 96px;
height: 96px;
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
} */


.splide__track--nav>.splide__list>.splide__slide.is-active{
    border: none !important;
}

.splide__track--nav>.splide__list>.splide__slide.is-active img{
    /* width: 100%;
    height: 100%; */
    border-radius: 2px;
    border: 2px solid var(--Primary-500, #FA8232);
}

.quick-view .thumbnails .main-carousel .splide__slide .thumbnail-img{
    /* width: 100%;
    height: 100%; */
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
}

.quick-view .thumbnails .thumbnail-carousel .splide__slide{
    /* width: 616px; */
    width: 100%;
    height: 364px;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
}

.quick-view .thumbnails .thumbnail-carousel .splide__slide .slider-img{
    /* width: 616px; */
    width: 100%;
    height: 364px;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
}

.splide__track--nav>.splide__list>.splide__slide img{
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    cursor: pointer;
    padding: 2px;
}

.splide__arrow--prev{
position: absolute;
top: 34%;
left: -6.5%;
border: none;
outline: none;
display: flex;
padding: 15px;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 100px;
border: 2px solid var(--Gray-00, #FFF);
opacity: 1 !important;
background: var(--Primary-700, #FA8232) !important;
}

.splide__arrow--prev i{
    /* width: 24px;
    height: 24px; */
    font-size: 18px;
    color: white;
}

.splide__arrow--next{
    position: absolute;
    top: 33%;
    right: -6%;
    border: none;
    outline: none;
    display: flex;
    padding: 15px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    border: 2px solid var(--Gray-00, #FFF);
    opacity: 1 !important;
    background: var(--Primary-700, #FA8232) !important;
    }
    
.splide__arrow--next i{
        /* width: 24px;
        height: 24px; */
        font-size: 18px;
        color: white;
}

.quick-view .product-details .name{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 22px;
padding-top: 3px;
}

.quick-view .rating-review .rating span svg{
width: 18px;
height: 18px;
}

.quick-view .rating-review .rating .star{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 18px;
}

.quick-view .rating-review .review{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
margin-left: 8px;
}

.quick-view .product-details .common-1{
color: var(--Gray-600, #5F6C72);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}

.quick-view .product-details .common-2{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: 18px;
}

.quick-view .product-details .common-2-color{
color: var(--Success-500, #2DB224);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 18px;
}

.quick-view .product-details .price-off{
    padding-top: 8px;
    padding-bottom: 12px;
}

.quick-view .product-details .price .current-price{
    color: var(--Secondary-500, #2DA5F3);
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.quick-view .product-details .price .actual-price{
    color: var(--Gray-500, #77878F);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 133.333% */
    text-decoration-line: strikethrough;
}

.quick-view .product-details .off{
display: flex;
padding: 4px 8px;
align-items: flex-start;
gap: 8px;
border-radius: 2px;
background: var(--Warning-400, #EFD33D);
margin-left: 6px;
}

.quick-view .product-details .off span{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.quick-view .product-details .specification{
    padding-top: 12px;
}

/* .quick-view .product-details .specification select{
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
} */

.quick-view .product-details .specification label{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}

.quick-view .product-details .specification select option{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.quick-view .product-details .specification .form-check {
    display: inline-block;
}

.quick-view .product-details .specification .form-check-label {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
}

.quick-view .product-details .specification .form-check-label.grey {
    background: #B1B5B8;
    box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
}

.quick-view .product-details .specification .form-check-label.white {
    background: #E0E1E1;
    box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
}

.quick-view .product-details .specification .form-check-input {
    display: none;
}

.quick-view .product-details .specification .form-check-input:checked + .form-check-label {
    border-radius: 50%;
    outline: 1px solid var(--Primary-500, #FA8232);
    outline-offset: 2px;
}

.quick-view .qty--add-to-card--buy-now{
    margin-left: 2px;
    padding-top: 5px;
    padding-bottom: 10px;
}

.quick-view .qty{
display: flex;
/* padding: 16px 10px; */
/* width: 164px; */
height: 40px;
justify-content: space-between;
align-items: center;
border-radius: 3px;
border: 2px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.quick-view .qty .minus,.plus svg{
width: 14px;
height: 14px;
flex-shrink: 0;
cursor: pointer;
}

.quick-view .qty .quantity-input{
color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.quick-view .qty input:focus{
    outline: none;
    border: none;
}

.quick-view .add-to-card{
border:none;
outline: none;
display: flex;
/* width: 264px; */
/* max-width: 100%; */
padding: 0px 25px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 3px;
background: var(--Primary-500, #FA8232);
}

.quick-view .add-to-card .text{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0.192px;
    text-transform: uppercase;
}

.quick-view .add-to-card span svg{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.quick-view .buy-now{
display: flex;
/* padding: 0px 12px; */
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 3px;
border: 2px solid var(--Primary-500, #FA8232);
}

.quick-view .buy-now span{
    color: var(--Primary-500, #FA8232);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: 0.192px;
    text-transform: uppercase;
}

.quick-view .wishlist-compare{
    display: flex;
    align-items: content;
    justify-content: start;
}

.quick-view .add-to-compare{
    padding-left: 10px;
}

.quick-view .add-to-wishlist .text,.add-to-compare .text{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.quick-view .add-to-wishlist span svg,.add-to-compare span svg{
    width: 22px;
    height: 22px;
}

.quick-view .share-product .text{
color: var(--Gray-700, #475156);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}

.quick-view .share-product a{
    /* display: inline-flex;
justify-content: evenly;
align-items: center;
gap: 16px; */
padding-left: 3px;
}

.quick-view .share-product a svg{
width: 14px;
height: 14px;
color: #5F6C72;
}

.quick-view .share-product a:hover svg{
    width: 14px;
    height: 14px;
    color: #FA8232;
}

.quick-view .payment-card{
    padding: 8px 16px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    margin-top: 12px;
}

.quick-view .payment-card .title{
color: var(--Gray-900, #191C1F);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}

.quick-view .payment-card .payment-card-option{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
}

.quick-view .payment-card .payment-card-option img{
    width: 32px;
    height: 28px;
}


}

@media(min-width: 430px) AND (max-width: 1000px){

    /* .quick-view .quick-view-row{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
    } */

    .quick-view-modal .modal-body{
        position: relative;
    }
    
    .quick-view-modal .btn-close{
    
        position: absolute;
        top: 1%;
        right: -7%;
        z-index: 100;
    
    display: inline-flex;
    padding: 12px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.12);
    }
    
    .quick-view-modal .btn-close svg{
    width: 20px;
    height: 20px;
    }
    
    .quick-view .thumbnails{
        position: relative;
        height: 100%;
    }
    
    /* .quick-view .thumbnails .main-carousel .splide__slide{
    width: 96px;
    height: 96px;
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    } */
    
    
    .splide__track--nav>.splide__list>.splide__slide.is-active{
        border: none !important;
    }
    
    .splide__track--nav>.splide__list>.splide__slide.is-active img{
        /* width: 100%;
        height: 100%; */
        border-radius: 2px;
        border: 2px solid var(--Primary-500, #FA8232);
    }
    
    .quick-view .thumbnails .main-carousel .splide__slide .thumbnail-img{
        /* width: 100%;
        height: 100%; */
        border-radius: 2px;
        border: 1px solid var(--Gray-100, #E4E7E9);
    }
    
    .quick-view .thumbnails .thumbnail-carousel .splide__slide{
        /* width: 616px; */
        width: 100%;
        height: 400px;
        border-radius: 4px;
        border: 1px solid var(--Gray-100, #E4E7E9);
    }
    
    .quick-view .thumbnails .thumbnail-carousel .splide__slide .slider-img{
        /* width: 616px; */
        width: 100%;
        height: 400px;
        border-radius: 4px;
        border: 1px solid var(--Gray-100, #E4E7E9);
    }
    
    .splide__track--nav>.splide__list>.splide__slide img{
        border-radius: 4px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        cursor: pointer;
        padding: 2px;
    }
    
    .splide__arrow--prev{
    position: absolute;
    top: 34%;
    left: -6.5%;
    border: none;
    outline: none;
    display: flex;
    padding: 15px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    border: 2px solid var(--Gray-00, #FFF);
    opacity: 1 !important;
    background: var(--Primary-700, #FA8232) !important;
    }
    
    .splide__arrow--prev i{
        /* width: 24px;
        height: 24px; */
        font-size: 16px;
        color: white;
    }
    
    .splide__arrow--next{
        position: absolute;
        top: 33%;
        right: -6%;
        border: none;
        outline: none;
        display: flex;
        padding: 15px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 100px;
        border: 2px solid var(--Gray-00, #FFF);
        opacity: 1 !important;
        background: var(--Primary-700, #FA8232) !important;
        }
        
    .splide__arrow--next i{
            /* width: 24px;
            height: 24px; */
            font-size: 16px;
            color: white;
    }
    
    .quick-view .product-details .name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    padding-top: 3px;
    }
    
    .quick-view .rating-review .rating span svg{
    width: 14px;
    height: 14px;
    }
    
    .quick-view .rating-review .rating .star{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    }
    
    .quick-view .rating-review .review{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin-left: 8px;
    }
    
    .quick-view .product-details .common-1{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .quick-view .product-details .common-2{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    }
    
    .quick-view .product-details .common-2-color{
    color: var(--Success-500, #2DB224);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    }
    
    .quick-view .product-details .price-off{
        padding-top: 6px;
        padding-bottom: 8px;
    }
    
    .quick-view .product-details .price .current-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
    }
    
    .quick-view .product-details .price .actual-price{
        color: var(--Gray-500, #77878F);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 133.333% */
        text-decoration-line: strikethrough;
    }
    
    .quick-view .product-details .off{
    display: flex;
    padding: 3px 6px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 2px;
    background: var(--Warning-400, #EFD33D);
    margin-left: 4px;
    }
    
    .quick-view .product-details .off span{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
    }
    
    .quick-view .product-details .specification{
        padding-top: 10px;
    }
    
    /* .quick-view .product-details .specification select{
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    } */
    
    .quick-view .product-details .specification label{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    }
    
    .quick-view .product-details .specification select option{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }
    
    .quick-view .product-details .specification .form-check {
        display: inline-block;
    }
    
    .quick-view .product-details .specification .form-check-label {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        box-sizing: border-box;
    }
    
    .quick-view .product-details .specification .form-check-label.grey {
        background: #B1B5B8;
        box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
    }
    
    .quick-view .product-details .specification .form-check-label.white {
        background: #E0E1E1;
        box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
    }
    
    .quick-view .product-details .specification .form-check-input {
        display: none;
    }
    
    .quick-view .product-details .specification .form-check-input:checked + .form-check-label {
        border-radius: 50%;
        outline: 1px solid var(--Primary-500, #FA8232);
        outline-offset: 2px;
    }
    
    .quick-view .qty--add-to-card--buy-now{
        display: flex;
        flex-wrap: wrap;
        margin-left: 1px;
        padding-top: 3px;
        padding-bottom: 4px;
    }
    
    .quick-view .qty{
    display: flex;
    /* padding: 16px 10px; */
    /* width: 164px; */
    height: 32px;
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;
    border: 2px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .quick-view .qty .minus,.plus svg{
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    cursor: pointer;
    }
    
    .quick-view .qty .quantity-input{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .quick-view .qty input:focus{
        outline: none;
        border: none;
    }
    
    .quick-view .add-to-card{
    border:none;
    outline: none;
    display: flex;
    width: 108px;
    /* max-width: 100%; */
    padding: 0px 1px;
    justify-content: center;
    align-items: center;
    gap: 1;
    border-radius: 3px;
    background: var(--Primary-500, #FA8232);
    }
    
    .quick-view .add-to-card .text{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        letter-spacing: 0.192px;
        text-transform: uppercase;
    }
    
    .quick-view .add-to-card span svg{
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    
    .quick-view .buy-now{
    display: flex;
    padding: 0px 8px;
    width: 50px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: 3px;
    border: 2px solid var(--Primary-500, #FA8232);
    }
    
    .quick-view .buy-now span{
        color: var(--Primary-500, #FA8232);
        font-family: "Public Sans";
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 13px;
        letter-spacing: 0.192px;
        text-transform: uppercase;
    }
    
    .quick-view .wishlist-compare{
        display: flex;
        align-items: content;
        justify-content: start;
    }
    
    .quick-view .add-to-compare{
        padding-left: 10px;
    }
    
    .quick-view .add-to-wishlist .text,.add-to-compare .text{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }
    
    .quick-view .add-to-wishlist span svg,.add-to-compare span svg{
        width: 22px;
        height: 22px;
    }
    
    .quick-view .share-product .text{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .quick-view .share-product a{
        /* display: inline-flex;
    justify-content: evenly;
    align-items: center;
    gap: 16px; */
    padding-left: 3px;
    }
    
    .quick-view .share-product a svg{
    width: 14px;
    height: 14px;
    color: #5F6C72;
    }
    
    .quick-view .share-product a:hover svg{
        width: 14px;
        height: 14px;
        color: #FA8232;
    }
    
    .quick-view .payment-card{
        padding: 8px 16px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        margin-top: 12px;
    }
    
    .quick-view .payment-card .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .quick-view .payment-card .payment-card-option{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: start;
    }
    
    .quick-view .payment-card .payment-card-option img{
        width: 32px;
        height: 28px;
    }
    
    
}

@media(min-width: 300px) AND (max-width: 425px){

    /* .quick-view .quick-view-row{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
    } */

    .quick-view-modal .modal-body{
        position: relative;
    }
    
    .quick-view-modal .btn-close{
    
        position: absolute;
        top: 0%;
        right: 0%;
        z-index: 10000;
    
    display: inline-flex;
    padding: 12px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    background: black;
    }
    
    .quick-view-modal .btn-close svg{
    width: 20px;
    height: 20px;
    }
    
    .quick-view .thumbnails{
        position: relative;
        height: 100%;
    }
    
    /* .quick-view .thumbnails .main-carousel .splide__slide{
    width: 96px;
    height: 96px;
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    } */
    
    
    .splide__track--nav>.splide__list>.splide__slide.is-active{
        border: none !important;
    }
    
    .splide__track--nav>.splide__list>.splide__slide.is-active img{
        /* width: 100%;
        height: 100%; */
        border-radius: 2px;
        border: 2px solid var(--Primary-500, #FA8232);
    }
    
    .quick-view .thumbnails .main-carousel .splide__slide .thumbnail-img{
        /* width: 100%;
        height: 100%; */
        border-radius: 2px;
        border: 1px solid var(--Gray-100, #E4E7E9);
    }
    
    .quick-view .thumbnails .thumbnail-carousel .splide__slide{
        /* width: 616px; */
        width: 100%;
        height: 400px;
        border-radius: 4px;
        border: 1px solid var(--Gray-100, #E4E7E9);
    }
    
    .quick-view .thumbnails .thumbnail-carousel .splide__slide .slider-img{
        /* width: 616px; */
        width: 100%;
        height: 400px;
        border-radius: 4px;
        border: 1px solid var(--Gray-100, #E4E7E9);
    }
    
    .splide__track--nav>.splide__list>.splide__slide img{
        border-radius: 4px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        cursor: pointer;
        padding: 2px;
    }
    
    .splide__arrow--prev{
    position: absolute;
    top: 34%;
    left: -6.5%;
    border: none;
    outline: none;
    display: flex;
    padding: 15px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    border: 2px solid var(--Gray-00, #FFF);
    opacity: 1 !important;
    background: var(--Primary-700, #FA8232) !important;
    }
    
    .splide__arrow--prev i{
        /* width: 24px;
        height: 24px; */
        font-size: 16px;
        color: white;
    }
    
    .splide__arrow--next{
        position: absolute;
        top: 33%;
        right: -6%;
        border: none;
        outline: none;
        display: flex;
        padding: 15px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 100px;
        border: 2px solid var(--Gray-00, #FFF);
        opacity: 1 !important;
        background: var(--Primary-700, #FA8232) !important;
        }
        
    .splide__arrow--next i{
            /* width: 24px;
            height: 24px; */
            font-size: 16px;
            color: white;
    }
    
    .quick-view .product-details .name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    padding-top: 3px;
    }
    
    .quick-view .rating-review .rating span svg{
    width: 14px;
    height: 14px;
    }
    
    .quick-view .rating-review .rating .star{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    }
    
    .quick-view .rating-review .review{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin-left: 8px;
    }
    
    .quick-view .product-details .common-1{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .quick-view .product-details .common-2{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    }
    
    .quick-view .product-details .common-2-color{
    color: var(--Success-500, #2DB224);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    }
    
    .quick-view .product-details .price-off{
        padding-top: 6px;
        padding-bottom: 8px;
    }
    
    .quick-view .product-details .price .current-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
    }
    
    .quick-view .product-details .price .actual-price{
        color: var(--Gray-500, #77878F);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 133.333% */
        text-decoration-line: strikethrough;
    }
    
    .quick-view .product-details .off{
    display: flex;
    padding: 3px 6px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 2px;
    background: var(--Warning-400, #EFD33D);
    margin-left: 4px;
    }
    
    .quick-view .product-details .off span{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
    }
    
    .quick-view .product-details .specification{
        padding-top: 10px;
    }
    
    /* .quick-view .product-details .specification select{
    border-radius: 2px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    } */
    
    .quick-view .product-details .specification label{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    }
    
    .quick-view .product-details .specification select option{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
    }
    
    .quick-view .product-details .specification .form-check {
        display: inline-block;
    }
    
    .quick-view .product-details .specification .form-check-label {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        box-sizing: border-box;
    }
    
    .quick-view .product-details .specification .form-check-label.grey {
        background: #B1B5B8;
        box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
    }
    
    .quick-view .product-details .specification .form-check-label.white {
        background: #E0E1E1;
        box-shadow: 0px -2px 6px 0px rgba(255, 255, 255, 0.24) inset, 0px 2px 6px 0px rgba(0, 0, 0, 0.12) inset;
    }
    
    .quick-view .product-details .specification .form-check-input {
        display: none;
    }
    
    .quick-view .product-details .specification .form-check-input:checked + .form-check-label {
        border-radius: 50%;
        outline: 1px solid var(--Primary-500, #FA8232);
        outline-offset: 2px;
    }
    
    .quick-view .qty--add-to-card--buy-now{
        display: flex;
        flex-wrap: wrap;
        margin-left: 1px;
        padding-top: 3px;
        padding-bottom: 4px;
    }
    
    .quick-view .qty{
    display: flex;
    /* padding: 16px 10px; */
    /* width: 164px; */
    width: 100%;
    height: 36px;
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;
    border: 2px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    margin-left: 0.1rem;
    }
    
    .quick-view .qty .minus,.plus svg{
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    cursor: pointer;
    }
    
    .quick-view .qty .quantity-input{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .quick-view .qty input:focus{
        outline: none;
        border: none;
    }
    
    .quick-view .add-to-card{
    border:none;
    outline: none;
    display: flex;
    /* width: 362px; */
    width: 100% !important;
    /* max-width: 100%; */
    padding: 0px 1px;
    justify-content: center;
    align-items: center;
    gap: 1;
    border-radius: 3px;
    background: var(--Primary-500, #FA8232);
    }
    
    .quick-view .add-to-card .text{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 40px;
        letter-spacing: 0.192px;
        text-transform: uppercase;
    }
    
    .quick-view .add-to-card span svg{
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    
    .quick-view .buy-now{
    display: flex;
    padding: 0px 8px;
    /* width: 50px; */
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: 3px;
    border: 2px solid var(--Primary-500, #FA8232);
    }
    
    .quick-view .buy-now span{
        color: var(--Primary-500, #FA8232);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 40px;
        letter-spacing: 0.192px;
        text-transform: uppercase;
    }
    
    .quick-view .wishlist-compare{
        display: flex;
        align-items: content;
        justify-content: start;
    }
    
    .quick-view .add-to-compare{
        padding-left: 10px;
    }
    
    .quick-view .add-to-wishlist .text,.add-to-compare .text{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }
    
    .quick-view .add-to-wishlist span svg,.add-to-compare span svg{
        width: 22px;
        height: 22px;
    }
    
    .quick-view .share-product .text{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .quick-view .share-product a{
        /* display: inline-flex;
    justify-content: evenly;
    align-items: center;
    gap: 16px; */
    padding-left: 3px;
    }
    
    .quick-view .share-product a svg{
    width: 14px;
    height: 14px;
    color: #5F6C72;
    }
    
    .quick-view .share-product a:hover svg{
        width: 14px;
        height: 14px;
        color: #FA8232;
    }
    
    .quick-view .payment-card{
        padding: 8px 16px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        margin-top: 12px;
    }
    
    .quick-view .payment-card .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .quick-view .payment-card .payment-card-option{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: start;
    }
    
    .quick-view .payment-card .payment-card-option img{
        width: 32px;
        height: 28px;
    }
    
    
}
/*********************************************************Quick View Media Queries End*****************************************************/

/************************************************************Home page user shopping cart Media Queries**************************************/
@media(min-width: 430px) AND (max-width: 768px){
    
    .user-shopping-cart{
    position:absolute;
    top: 108%;
    right: 14%;
    z-index: 10000;
    display: inline-flex;
    /* padding-bottom: 24px; */
    /* padding: 28px; */
    width: 325px;
    padding: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
    }
    
    .user-shopping-cart .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    }
    
    .user-shopping-cart .count{
        color: var(--Gray-600, #5F6C72);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .user-shopping-cart .horizontal-line{
        display: flex;
        /* padding: 16px 24px; */
        width: 325px;
        height: 2px;
        align-items: flex-start;
        /* gap: 10px; */
        background: var(--Gray-00, #FFF);
        box-shadow: 0px -1px 0px 0px #E4E7E9 inset;
    }
    
    .user-shopping-cart .cart-product{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    border-radius: 3px;
    background: var(--Gray-00, #FFF);
    } 
    
    .user-shopping-cart .cart-product img{
    width: 60px;
    height: 60px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    }
    
    .user-shopping-cart .cart-product .name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .user-shopping-cart .cart-product .qty{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; 
    }
    
    .user-shopping-cart .cart-product .price{
        color: var(--Secondary-500, #2DA5F3);
    
    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 142.857% */
    }
    
    .user-shopping-cart .sub-total{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .user-shopping-cart .sub-total .text{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }
    
    .user-shopping-cart .sub-total .price{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
    }
    
    .user-shopping-cart .checkout-btn{
        display: flex;
    width: 300px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    }
    
    .user-shopping-cart .checkout-btn .text{
        color: var(--Gray-00, #FFF);
    
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px; /* 342.857% */
        letter-spacing: 0.168px;
        text-transform: uppercase;
    }
    
    .user-shopping-cart .checkout-btn svg{
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    
    .user-shopping-cart .view-cart{
    display: flex;
    width: 300px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 2px;
    border: 2px solid var(--Primary-100, #FFE7D6);
    }
    
    .user-shopping-cart .view-cart .text{
        color: var(--Primary-500, #FA8232);
    
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
        letter-spacing: 0.168px;
        text-transform: uppercase;
    }
}

@media(min-width: 300px) AND (max-width: 768px){
    
    .user-shopping-cart{
    position:absolute;
    top: 108%;
    right: 10%;
    z-index: 10000;
    display: inline-flex;
    /* padding-bottom: 24px; */
    /* padding: 28px; */
    width: 325px;
    padding: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
    }
    
    .user-shopping-cart .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    }
    
    .user-shopping-cart .count{
        color: var(--Gray-600, #5F6C72);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .user-shopping-cart .horizontal-line{
        display: flex;
        /* padding: 16px 24px; */
        width: 325px;
        height: 2px;
        align-items: flex-start;
        /* gap: 10px; */
        background: var(--Gray-00, #FFF);
        box-shadow: 0px -1px 0px 0px #E4E7E9 inset;
    }
    
    .user-shopping-cart .cart-product{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    border-radius: 3px;
    background: var(--Gray-00, #FFF);
    } 
    
    .user-shopping-cart .cart-product img{
    width: 60px;
    height: 60px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    }
    
    .user-shopping-cart .cart-product .name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    }
    
    .user-shopping-cart .cart-product .qty{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; 
    }
    
    .user-shopping-cart .cart-product .price{
        color: var(--Secondary-500, #2DA5F3);
    
    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 142.857% */
    }
    
    .user-shopping-cart .sub-total{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .user-shopping-cart .sub-total .text{
        color: var(--Gray-700, #475156);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }
    
    .user-shopping-cart .sub-total .price{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
    }
    
    .user-shopping-cart .checkout-btn{
        display: flex;
    width: 300px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    }
    
    .user-shopping-cart .checkout-btn .text{
        color: var(--Gray-00, #FFF);
    
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px; /* 342.857% */
        letter-spacing: 0.168px;
        text-transform: uppercase;
    }
    
    .user-shopping-cart .checkout-btn svg{
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    
    .user-shopping-cart .view-cart{
    display: flex;
    width: 300px;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 2px;
    border: 2px solid var(--Primary-100, #FFE7D6);
    }
    
    .user-shopping-cart .view-cart .text{
        color: var(--Primary-500, #FA8232);
    
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
        letter-spacing: 0.168px;
        text-transform: uppercase;
    }
}
/*******************************************************Home page user shopping cart Media Queries End***************************************/

/***********************************************************Home Page User Login Panel********************************************************/
@media(min-width: 300px) AND (max-width: 425px){
    
.header .user-login{
    position:absolute;
    top: 108%;
    right: 0;
    z-index: 10000;

display: inline-flex;
/* padding: 20px 10px !important; */
flex-direction: column;
align-items: flex-start;
gap: 15px;

border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);

/* Dropdown Shadow */
box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
}

.header .user-login .sign-in-text{
    color: var(--Gray-900, #191C1F);
    text-align: center;
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

.header .user-login label{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.header .user-login .forgot-password{
color: var(--Secondary-500, #2DA5F3);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 18px; 
}

.header .user-login .form-control.input{
width: 280px;
height: 38px;
align-self: stretch;
border-radius: 2px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.header .user-login .password{
    position: relative;
}

.header .user-login .password-view{
    position: absolute;
    bottom: 0;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;

}

.header .user-login .password-view svg{
width: 18px;
height: 18px;
}

.header .user-login .login-btn{
border: none;
outline: none;
display: flex;
width: 280px;
padding: 0px 20px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
background: var(--Primary-500, #FA8232);
}

.header .user-login .login-btn .text{
    color: var(--Gray-00, #FFF);

/* Heading/07 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 40px; /* 342.857% */
letter-spacing: 0.168px;
text-transform: uppercase;
}

.header .user-login .login-btn svg{
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-bottom: 3px;
}

.header .user-login .dont-account{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
}

.header .user-login .line{
width: 80px;
height: 1px;
background: #E4E7E9;
}

.header .user-login .dont-account .text{
color: var(--Gray-500, #77878F);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; 
}

.header .user-login .create-account-text{
    display: flex;
width: 280px;
padding: 0px 20px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 2px;
border: 2px solid var(--Primary-100, #FFE7D6);
margin-top: 10px;
}

.header .user-login .create-account-text span{
color: var(--Primary-500, #FA8232);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 40px; 
letter-spacing: 0.168px;
text-transform: uppercase;
}
    /* .header .user-login{
        position:absolute;
        top: 108%;
        left: 0;
        z-index: 10000;
    
    display: inline-flex;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.12);
    } */
}

/* @media(min-width: 300px) AND (max-width: 375px){
    .header .user-login .form-control.input{
        width: 300px;
        height: 44px;
        align-self: stretch;
        border-radius: 2px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
    }
} */

/**********************************************************Home Page User Login Panel End*****************************************************/

/* *********************************************************Footer Section Media Queries *****************************************************/
@media(min-width: 430px) AND (max-width: 768px){
    .footer-section .footer{
        padding: 62px 0px;
        gap: 24px;
    }
        
        .footer .footer-logo{
            display: flex;
            align-items: center;
            gap: 8px;
            justify-content: start;
            padding-bottom: 25px;
        }
        
        .footer .footer-logo .icon svg{
            width: 40px;
            height: 40px;
        }
        
        .footer .footer-logo .text{
            color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px; /* 125% */
        letter-spacing: -0.64px;
        }
        
        .footer .customer-support{
        color: var(--Gray-500, #77878F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        margin: 0;
        padding: 0;
        padding-bottom: 10px;
        }
        
        .footer .contact{
            color: var(--Gray-00, #FFF);
        
        /* Body/Large/500 */
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 133.333% */
        padding-top: 10px !important;
        }
        
        .footer .address{
            color: var(--Gray-300, #ADB7BC);
        
        /* Body/Medium/400 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 150% */
        padding-top: 10px;
        }
        
        .footer .mail{
        color: var(--Gray-00, #FFF);
        
        /* Body/Medium/500 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; 
        }
        
        .footer .top-category{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        }
        
        .footer .top-category .title{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; 
        text-transform: uppercase;
        }
        
        .footer .top-category .url{
        color: var(--Gray-400, #929FA5);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px; 
        }
        
        .footer .top-category .accessories{
            display: flex;
            align-items: center;
            gap: 8px;
            justify-content: start;
        }
        
        .footer .top-category .accessories .line{
        width: 20px;
        height: 2px;
        background: #EBC80C;
        }
        
        .footer .top-category .accessories .text{
            color: var(--Gray-00, #FFF);
        
            /* Body/Small/500 */
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px; /* 142.857% */
        }
            
        .footer .top-category .browse-all .text{
            color: var(--Warning-500, #EBC80C);
        
            /* Body/Small/500 */
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px; /* 142.857% */
        }
        
        .footer .top-category .browse-all .icon svg{
            width: 18px;
            height: 18px;
        }
        
        .footer .download-app .title{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
            text-transform: uppercase;
        }
        
        .footer .download-app .app-div{
        display: flex;
        padding: 10px 5px;
        justify-content: center;
        align-items: center;
        gap: 5px;
        border-radius: 3px;
        background: var(--Gray-800, #303639);
        margin-top: 20px;
        }

        /* .footer .download-app .app-div .row{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
        } */
        
        .footer .download-app .app-div .icon svg{
            width: 24px;
            height: 24px;
        }
        
        .footer .download-app .get-it-now{
        color: #FFF;
        font-family: Inter;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 11px; 
        }
        
        .footer .download-app .text{
            color: #FFF;
            font-family: Inter;
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px; /* 142.857% */
        }
        
        .footer .popular-tag{
        
        }
        
        .footer .popular-tag .title{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
            text-transform: uppercase;
        }
        
        .footer .popular-tag .tag{
        display: inline-flex;
        padding: 5px 10px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        border-radius: 2px;
        border: 1px solid var(--Gray-800, #303639);
        margin-bottom: 10px;
        
        color: var(--Gray-00, #FFF);
        
        /* Body/Small/500 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px; /* 142.857% */
        }
        
        .footer-section  .footer-bottom{
        display: flex;
        padding: 8px 0;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--Gray-900, #191C1F);
        box-shadow: 0px 1px 0px 0px #303639 inset;
        }
        
        .footer-section .footer-bottom span{
            color: var(--Gray-300, #ADB7BC);
            text-align: center;
            
            /* Body/Small/400 */
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px; /* 142.857% */
            padding-top: 20px;
        }
}
/* *****************************************************Footer Section Media Queries End*****************************************************/


/***********************************************************Subscribe Newsletter Media Queries************************************************/
@media(min-width: 430px) AND (max-width: 768px){
    .subscribe-newsletter-section{
        width: 100%;
        height: 100%;
        background: #1B6392;
    }
    
    .subscribe-newsletter{
    display: flex;
    padding: 52px 200px;
    padding-bottom: 42px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background: var(--Secondary-700, #1B6392);
    }
    
    .subscribe-newsletter .title{
    color: var(--Gray-00, #FFF);
    text-align: center;
    font-family: "Public Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    }
    
    .subscribe-newsletter .describe{
        color: var(--Gray-00, #FFF);
        text-align: center;
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }
    
    .subscribe-newsletter .subscribe-newsletter-input{
        display: flex;
        padding: 12px;
        align-items: center;
        gap: 16px;
    
        border-radius: 3px;
        background: #FFF;
        box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.12);
    }
    
    .subscribe-newsletter .subscribe-input-box{
    display: flex;
    width: 324px;
    padding: 5px 30px 5px 10px;
    align-items: center;
    
    border-radius: 2px;
    background: var(--Gray-00, #FFF);
    }
    
    .subscribe-newsletter .subscribe-input-box input{
        border: none;
        outline: none;
        width: 100%;
        height: 100%;
        background-color: transparent;
        color: var(--Gray-500, #77878F);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }
    
    .subscribe-newsletter .subscribe-btn{
    border: none;
    outline: none;
    display: flex;
    padding: 0px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    }
    
    .subscribe-newsletter .subscribe-btn .subscribe-text{
        color: var(--Gray-00, #FFF);
    
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px; /* 342.857% */
        letter-spacing: 0.168px;
        text-transform: uppercase;
    }
    
    .subscribe-newsletter .subscribe-btn svg{
        width: 20px;
        height: 20px;
    }
    
    .subscribe-newsletter .hr-line{
    width: 424px;
    height: 1px;
    opacity: 0.12;
    background: #FFF;
    } 
    
    .subscribe-newsletter .company{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }
    
    .subscribe-newsletter .company svg{
    width: 62px;
    height: 62px;
    }
}

@media(min-width: 300px) AND (max-width: 425px){
    .subscribe-newsletter-section{
        width: 100%;
        height: 100%;
        background: #1B6392;
    }
    
    .subscribe-newsletter{
    display: flex;
    padding: 32px 50px;
    padding-bottom: 25px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background: var(--Secondary-700, #1B6392);
    }
    
    .subscribe-newsletter .title{
    color: var(--Gray-00, #FFF);
    text-align: center;
    font-family: "Public Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    }
    
    .subscribe-newsletter .describe{
        color: var(--Gray-00, #FFF);
        text-align: center;
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }
    
    .subscribe-newsletter .subscribe-newsletter-input{
        display: flex;
        padding: 10px;
        align-items: center;
        gap: 10px;
    
        border-radius: 3px;
        background: #FFF;
        box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.12);
    }
    
    .subscribe-newsletter .subscribe-input-box{
    display: flex;
    /* width: 124px; */
    width: 170px;
    padding: 5px;
    align-items: center;
    
    border-radius: 2px;
    background: var(--Gray-00, #FFF);
    }
    
    .subscribe-newsletter .subscribe-input-box input{
        border: none;
        outline: none;
        width: 100%;
        height: 100%;
        background-color: transparent;
        color: var(--Gray-500, #77878F);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }
    
    .subscribe-newsletter .subscribe-btn{
    border: none;
    outline: none;
    display: flex;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    }
    
    .subscribe-newsletter .subscribe-btn .subscribe-text{
        color: var(--Gray-00, #FFF);
    
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 35px; /* 342.857% */
        letter-spacing: 0.168px;
        text-transform: uppercase;
    }
    
    .subscribe-newsletter .subscribe-btn svg{
        width: 18px;
        height: 18px;
    }
    
    .subscribe-newsletter .hr-line{
    width: 100%;
    height: 1px;
    opacity: 0.12;
    background: #FFF;
    } 
    
    .subscribe-newsletter .company{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    
    .subscribe-newsletter .company svg{
    width: 42px;
    height: 42px;
    }
}
/*********************************************************Subscribe Newsletter Media Queries End**********************************************/

/***********************************************************Latest News Media Queries******************************************************* */
@media(min-width: 430px) AND (max-width: 768px){
    .latest-news-section{
        display: flex;
        /* padding: 72px 300px; */
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        background: var(--Gray-50, #F2F4F5);
    }
        
        .latest-news .latest-news-card .card{
            display: flex;
            padding: 18px;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        
            border-radius: 4px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
        box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.04);
        }
        
        .latest-news .latest-news-card img{
        width: 100%;
        height: 200px;
        border-radius: 3px;
        object-fit: cover;
        }
        
        .latest-news .latest-news-card  .common{
            color: var(--Gray-700, #475156);
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }
        
        .latest-news .latest-news-card .icon svg{
            width: 18px;
            height: 18px;
        }
        
        .latest-news .latest-news-card .title{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        padding-top: 6px;
        }
        
        .latest-news .latest-news-card .description{
            color: var(--Gray-500, #77878F);
            font-family: "Public Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }
        
        .latest-news .latest-news-card .read-more-btn{
            display: inline-flex;
            padding: 0px 20px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            border-radius: 2px;
            border: 2px solid var(--Primary-100, #FFE7D6);
        }
        
        .latest-news .latest-news-card .read-more-btn .read-more-text{
            color: var(--Primary-500, #FA8232);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 38px;
            letter-spacing: 0.168px;
            text-transform: uppercase;
        }
        
        .latest-news .latest-news-card .read-more-btn svg{
            width: 18px;
            height: 18px;
            margin-bottom: 2px;
        }
}
/***********************************************************Latest News Media Queries End*************************************************** */

/***********************************************************Marketing Strategies Media Queries******************************************** */
@media(min-width: 430px) AND (max-width: 1024px){
    .marketing-strategies-section{
        width: 100%;
        height: 100%;
        background: #FFF;
    }
    
    .marketing-strategies .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    }
    
    .marketing-strategies .product-details .card{
        display: flex;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 6px;
        border-radius: 3px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .marketing-strategies .product-details .card img{
        width: 60px;
        height: 60px;
    }
    
    .marketing-strategies .product-details .card .product-name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
    }
    
    .marketing-strategies .product-details .card .product-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px; 
    }
}

@media(min-width: 770px) AND (max-width: 1024px){
    .marketing-strategies-section{
        width: 100%;
        height: 100%;
        background: #FFF;
    }
    
    .marketing-strategies .title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    }
    
    .marketing-strategies .product-details .card{
        display: flex;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 6px;
        border-radius: 3px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .marketing-strategies .product-details .card img{
        width: 50px;
        height: 50px;
    }
    
    .marketing-strategies .product-details .card .product-name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
    }
    
    .marketing-strategies .product-details .card .product-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 18px; 
    }
}
/*******************************************************Marketing Strategies Media Queries End******************************************* */

/************************************************************Third Banner Media Queries*******************************************************/
@media(min-width: 430px) AND (max-width: 768px){

    .third-banner-section{
        width: 100%;
        height: 100%;
        background: #FFF;
    }
    
    .third-banner-section .third-banner{
        background: var(--Primary-100, #FFE7D6);
        display: flex;
        padding: 40px 90px;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }
    
    .third-banner .left-content .save-up-to{
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 5px;
        border-radius: 2px;
        background: var(--Secondary-500, #2DA5F3);
    }
    
    .third-banner .left-content .save-up-to span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
    }
    
    .third-banner .product-name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 38px;
    font-style: normal;
    font-weight: 500;
    line-height: 46px; 
    }
    
    .third-banner .product-detail{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px; 
    }
    
    .third-banner .shop-now-btn{
        display: inline-flex;
        padding: 0px 20px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 3px;
        background: var(--Primary-500, #FA8232);
    }
    
    .third-banner .shop-now-btn span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px; 
        letter-spacing: 0.192px;
        text-transform: uppercase;
    }
    
    .third-banner .right-content{
        position: relative;
    }
    
    .third-banner .right-content .price{
    position: absolute;
    top: 9%;
    right: 76%;
    z-index: 100;
    display: inline-flex;
    padding: 28px 18px;
    align-items: flex-start;
    gap: 8px;
    border-radius: 50%;
    border: 5px solid var(--Gray-00, #FFF);
    background: var(--Primary-200, #FFCEAD);
    }
    
    .third-banner .right-content .price span{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
    }

}

@media(min-width: 300px) AND (max-width: 425px){

    .third-banner-section{
        width: 100%;
        height: 100%;
        background: #FFF;
    }
    
    .third-banner-section .third-banner{
        background: var(--Primary-100, #FFE7D6);
        display: flex;
        padding: 30px 30px 0px 30px;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }
    
    .third-banner .left-content .save-up-to{
        display: inline-flex;
        padding: 5px 10px;
        align-items: flex-start;
        gap: 5px;
        border-radius: 2px;
        background: var(--Secondary-500, #2DA5F3);
    }
    
    .third-banner .left-content .save-up-to span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
    }
    
    .third-banner .product-name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; 
    }
    
    .third-banner .product-detail{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; 
    }
    
    .third-banner .shop-now-btn{
        display: inline-flex;
        padding: 5px 18px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 3px;
        background: var(--Primary-500, #FA8232);
    }
    
    .third-banner .shop-now-btn span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 35px; 
        letter-spacing: 0.192px;
        text-transform: uppercase;
    }
    
    .third-banner .right-content{
        position: relative;
    }
    
    .third-banner .right-content .price{
    position: absolute;
    top: 9%;
    right: 76%;
    z-index: 100;
    display: inline-flex;
    padding: 25px 15px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 50%;
    border: 4px solid var(--Gray-00, #FFF);
    background: var(--Primary-200, #FFCEAD);
    }
    
    .third-banner .right-content .price span{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
    }

}
/************************************************************Third Banner Media Queries End***************************************************/


/*************************************************************Computer Accessories Media Queries******************************************** */
@media(min-width: 770px) AND (max-width: 1024px){
    
    
.computer-accessories .first-discount-banner{
    display: flex;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px;
    border-radius: 4px;
    background: var(--Warning-200, #F7E99E);
}
    
.computer-accessories .first-discount-banner .product-name{
    color: var(--Gray-900, #191C1F);
    text-align: center;
    
    /* Heading/02 */
    font-family: "Public Sans";
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 114.286% */
}
    
.computer-accessories .first-discount-banner .short-title{
    color: var(--Gray-700, #475156);
    text-align: center;
    
    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}
    
.computer-accessories .first-discount-banner .offer-ends-in{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 142.857% */
}
    
.computer-accessories .first-discount-banner .ends-of-christmas{
    display: flex;
    padding: 3px 6px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 3px;
    background: var(--Gray-00, #FFF);
    
    color: var(--Gray-900, #191C1F);
    text-align: center;
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
}
    
.computer-accessories .first-discount-banner .shop-now-btn{
    display: flex;
    width: 180px;
    padding: 0px 22px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 45px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}
    
.computer-accessories .first-discount-banner img{
    width: 128px;
    height: 128px;
    object-fit: cover;
}

.second-discount-banner{
display: flex;
padding: 40px 24px;
flex-direction: column;
justify-content: center;
align-items: center;
/* gap: 24px; */
border-radius: 4px;
background: #124261;
}

.second-discount-banner .summer-sales{
display: flex;
padding: 5px 10px;
align-items: flex-start;
gap: 7px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.12);
}

.second-discount-banner .summer-sales span{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 16px; 
}

.second-discount-banner .discount-percentage{
color: #FFF;
text-align: center;
/* Heading/02 */
font-family: "Public Sans";
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 114.286% */
}

.second-discount-banner .short-describe{
color: #FFF;
text-align: center;
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.second-discount-banner .product-name{
    color: var(--Warning-500, #EBC80C);

/* Body/Large/600 */
font-family: "Public Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}

.second-discount-banner .shop-now-btn{
display: flex;
width: 180px;
padding: 0px 18px;
justify-content: center;
align-items: center;
gap: 7px;
border-radius: 2px;
background: var(--Secondary-500, #2DA5F3);
}

.second-discount-banner .shop-now-btn span{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 45px; 
letter-spacing: 0.168px;
text-transform: uppercase;
}

.computer-accessories .heading{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
}

/******************************/
    
    .computer-accessories-product .title{
        font-size: 20px;
    }

    .computer-accessories-product .product-filtering .nav-link.active{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    
    display: flex;
    padding: 6px;
    align-items: center;
    gap: 8px;
    /* border-bottom: 2px solid #FA8232; */
    background: var(--Gray-00, #FFF);
    box-shadow: 0px -2px 0px 0px #FA8232 inset;
    } 
    
    .computer-accessories-product .product-filtering .nav-link{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .computer-accessories-product .product-filtering .view-all-btn .browse-all{
    color: var(--Primary-500, #FA8232);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    }
    
    .computer-accessories-product .product-filtering .view-all-btn svg{
        width: 16px;
        height: 16px;
    }
    
    
    .computer-accessories-product .computer-accessories-product-card{
        position: relative; 
        overflow: hidden;
        /* width: 248px; */
        width: 100%;
        height: 320px;
        border-radius: 3px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
    }
    
    .computer-accessories-product-card .card .card-body{
        margin: 0;
        padding: 0;
        padding: 15px;
    }
    
    .computer-accessories-product-card .image-container {
            position: relative;
    }
        
    .computer-accessories-product-card .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
            opacity: 0;
            transition: opacity 0.3s ease;
    }
        
    .computer-accessories-product-card:hover .image-overlay {
            opacity: 1;
    }
        
        .computer-accessories-product-card:hover .wishlist-cart-preview {
            display: flex !important;
        }
        
        .computer-accessories-product-card .sold-out-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 4px 8px;
        align-items: flex-start;
        gap: 8px;
        border-radius: 2px;
        background: var(--Gray-400, #929FA5);
        }
        
        .computer-accessories-product-card .sold-out-tag span{
            color: var(--Gray-00, #FFF);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; /* 133.333% */
        }
        
        .computer-accessories-product-card .off{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 4px 8px;
            align-items: flex-start;
            gap: 8px;
            border-radius: 2px;
            background: var(--Warning-400, #EFD33D);
        }
        
        .computer-accessories-product-card .off span{
            color: var(--Gray-900, #191C1F);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; /* 133.333% */
        }
        
        .computer-accessories-product-card .hot-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 4px 8px;
        align-items: flex-start;
        gap: 8px;
        border-radius: 2px;
        background: var(--Danger-500, #EE5858);
        }
        
        .computer-accessories-product-card .hot-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
    
        .computer-accessories-product-card .best-deals-tag{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 4px 8px;
            align-items: flex-start;
            gap: 8px;
            border-radius: 2px;
            background: var(--Secondary-500, #2DA5F3);
        }
            
        .computer-accessories-product-card .best-deals-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
        }
    
        .computer-accessories-product-card .sale{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 4px 8px;
            align-items: flex-start;
            gap: 8px;
            border-radius: 2px;
            background: var(--Success-500, #2DB224);
        }
            
        .computer-accessories-product-card .sale span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
        
        .computer-accessories-product-card .wishlist-cart-preview{
            position: absolute;
            top: 27%;
            left: 8%;
            display: none;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon{
        display: flex;
        /* padding: 12px; */
        width: 35px !important;
        height: 35px !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 50%;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 5px;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon{
            display: flex;
            /* padding: 12px; */
            width: 35px;
            height: 35px;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border-radius: 50%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 5px;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon{
                display: flex;
                /* padding: 12px; */
                width: 35px;
                height: 35px;
                align-items: center;
                justify-content: center;
                gap: 6px;
                border-radius: 100%;
                /* background: var(--Gray-00, #62a7c2); */
                background: var(--Gray-00, #FFF);
                margin: 0 5px;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon svg{
        width: 18px;
        height: 18px;
        color: black;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon svg{
            width: 18px;
            height: 18px;
            color: black;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon svg{
                width: 18px;
                height: 18px;
                color: black;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
            color: white;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon:hover svg{
            color: white;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon:hover svg{
            color: white;
        }
        
        .computer-accessories-product-card img{
            /* width: 216px; */
        width: 100%;
        height: 172px;
        flex-shrink: 0;
        }
        
        .computer-accessories-product-card .product-name{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }
        
        .computer-accessories-product-card .actual-price{
            color: var(--Gray-400, #929FA5);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px; /* 142.857% */
        text-decoration-line: strikethrough;
        padding-top: 5px;
        }
        
        .computer-accessories-product-card .product-price{
            color: var(--Secondary-500, #2DA5F3);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px;
            padding-top: 5px;
        }
    
        .computer-accessories-product-card .rating{
            padding: 5px 0px;
        }
        
        .computer-accessories-product-card .rating .icon svg{
            width: 14px;
            height: 14px;
        }
        
        .computer-accessories-product-card .rating .count{
            color: var(--Gray-500, #77878F);
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px;
        }
}

@media(min-width: 430px) AND (max-width: 768px){

        
.computer-accessories .first-discount-banner{
    display: flex;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px;
    border-radius: 4px;
    background: var(--Warning-200, #F7E99E);
}
    
.computer-accessories .first-discount-banner .product-name{
    color: var(--Gray-900, #191C1F);
    text-align: center;
    
    /* Heading/02 */
    font-family: "Public Sans";
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 114.286% */
}
    
.computer-accessories .first-discount-banner .short-title{
    color: var(--Gray-700, #475156);
    text-align: center;
    
    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}
    
.computer-accessories .first-discount-banner .offer-ends-in{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 142.857% */
}
    
.computer-accessories .first-discount-banner .ends-of-christmas{
    display: flex;
    padding: 3px 6px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 3px;
    background: var(--Gray-00, #FFF);
    
    color: var(--Gray-900, #191C1F);
    text-align: center;
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 150% */
}
    
.computer-accessories .first-discount-banner .shop-now-btn{
    display: flex;
    width: 140px;
    padding: 0px 15px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 35px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}
    
.computer-accessories .first-discount-banner img{
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.second-discount-banner{
display: flex;
padding: 40px 24px;
flex-direction: column;
justify-content: center;
align-items: center;
/* gap: 24px; */
border-radius: 4px;
background: #124261;
}

.second-discount-banner .summer-sales{
display: flex;
padding: 4px 8px;
align-items: flex-start;
gap: 6px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.12);
}

.second-discount-banner .summer-sales span{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px; 
}

.second-discount-banner .discount-percentage{
color: #FFF;
text-align: center;
/* Heading/02 */
font-family: "Public Sans";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 114.286% */
}

.second-discount-banner .short-describe{
color: #FFF;
text-align: center;
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}

.second-discount-banner .product-name{
    color: var(--Warning-500, #EBC80C);

/* Body/Large/600 */
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px;
}

.second-discount-banner .shop-now-btn{
display: flex;
width: 140px;
padding: 0px 15px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 2px;
background: var(--Secondary-500, #2DA5F3);
}

.second-discount-banner .shop-now-btn span{
color: var(--Gray-00, #FFF);
font-family: "Public Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 35px; 
letter-spacing: 0.168px;
text-transform: uppercase;
}

.computer-accessories .heading{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}

/******************************/
    
    .computer-accessories-product .title{
        font-size: 16px;
    }


    .computer-accessories-product .filtering .nav-link.active{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    
    display: flex;
    padding: 6px;
    align-items: center;
    gap: 8px;
    /* border-bottom: 2px solid #FA8232; */
    background: var(--Gray-00, #FFF);
    box-shadow: 0px -2px 0px 0px #FA8232 inset;
    } 
    
    .computer-accessories-product .filtering .nav-link{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin: 0 !important;
    padding: 0 !important;
    padding: 0px 4px 4px 4px !important;
    }
    
    .computer-accessories-product .filtering .view-all-btn .browse-all{
    color: var(--Primary-500, #FA8232);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    }
    
    .computer-accessories-product .filtering .view-all-btn svg{
        width: 14px;
        height: 14px;
    }
    
    
    .computer-accessories-product .computer-accessories-product-card{
        position: relative; 
        overflow: hidden;
        /* width: 248px; */
        width: 100%;
        height: 320px;
        border-radius: 3px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
    }
    
    .computer-accessories-product-card .card .card-body{
        margin: 0;
        padding: 0;
        padding: 12px;
    }
    
    .computer-accessories-product-card .image-container {
            position: relative;
    }
        
    .computer-accessories-product-card .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
            opacity: 0;
            transition: opacity 0.3s ease;
    }
        
    .computer-accessories-product-card:hover .image-overlay {
            opacity: 1;
    }
        
        .computer-accessories-product-card:hover .wishlist-cart-preview {
            display: flex !important;
        }
        
        .computer-accessories-product-card .sold-out-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 3px 6px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 2px;
        background: var(--Gray-400, #929FA5);
        }
        
        .computer-accessories-product-card .sold-out-tag span{
            color: var(--Gray-00, #FFF);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 15px; /* 133.333% */
        }
        
        .computer-accessories-product-card .off{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 3px 6px;
            align-items: flex-start;
            gap: 8px;
            border-radius: 2px;
            background: var(--Warning-400, #EFD33D);
        }
        
        .computer-accessories-product-card .off span{
            color: var(--Gray-900, #191C1F);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; /* 133.333% */
        }
        
        .computer-accessories-product-card .hot-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 3px 6px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 2px;
        background: var(--Danger-500, #EE5858);
        }
        
        .computer-accessories-product-card .hot-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
    
        .computer-accessories-product-card .best-deals-tag{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 3px 6px;
            align-items: flex-start;
            gap: 6px;
            border-radius: 2px;
            background: var(--Secondary-500, #2DA5F3);
        }
            
        .computer-accessories-product-card .best-deals-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
        }
    
        .computer-accessories-product-card .sale{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 3px 6px;
            align-items: flex-start;
            gap: 6px;
            border-radius: 2px;
            background: var(--Success-500, #2DB224);
        }
            
        .computer-accessories-product-card .sale span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
        
        .computer-accessories-product-card .wishlist-cart-preview{
            position: absolute;
            top: 27%;
            left: 10%;
            display: none;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon{
        display: flex;
        /* padding: 12px; */
        width: 25px !important;
        height: 25px !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 50%;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 3px;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon{
            display: flex;
            /* padding: 12px; */
            width: 25px;
            height: 25px;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border-radius: 50%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 3px;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon{
                display: flex;
                /* padding: 12px; */
                width: 25px;
                height: 25px;
                align-items: center;
                justify-content: center;
                gap: 6px;
                border-radius: 100%;
                /* background: var(--Gray-00, #62a7c2); */
                background: var(--Gray-00, #FFF);
                margin: 0 3px;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon svg{
        width: 14px;
        height: 14px;
        color: black;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon svg{
            width: 14px;
            height: 14px;
            color: black;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon svg{
                width: 14px;
                height: 14px;
                color: black;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
            color: white;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .cart-icon:hover svg{
            color: white;
        }
        
        .computer-accessories-product-card .wishlist-cart-preview .preview-icon:hover svg{
            color: white;
        }
        
        .computer-accessories-product-card img{
            /* width: 216px; */
        width: 100%;
        height: 150px;
        flex-shrink: 0;
        }
        
        .computer-accessories-product-card .product-name{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px;
            
        }
        
        .computer-accessories-product-card .actual-price{
            color: var(--Gray-400, #929FA5);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        text-decoration-line: strikethrough;
        padding-top: 5px;
        }
        
        .computer-accessories-product-card .product-price{
            color: var(--Secondary-500, #2DA5F3);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
            padding-top: 5px;
        }
    
        .computer-accessories-product-card .rating{
            padding: 4px 0px;
        }
        
        .computer-accessories-product-card .rating .icon svg{
            width: 12px;
            height: 12px;
        }
        
        .computer-accessories-product-card .rating .count{
            color: var(--Gray-500, #77878F);
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px;
        }
}
/*************************************************************Computer Accessories Media Queries End**************************************** */

/***************************************************************Second Banner Second Media Queries********************************************/
@media(min-width: 770px) AND (max-width: 1024px){
    
.second-banner-section{
    width: 100%;
    height: 100%;
    background: #FFF;
}

.second-banner-section .first-banner-card{
    display: flex;
    padding: 36px;
    justify-content: center;
    align-items: center;
    gap: 34px;
    border-radius: 4px;
    background: var(--Gray-50, #F2F4F5);
}

.second-banner-section .first-banner-card .introduction{
display: inline-flex;
padding: 4px 8px;
align-items: flex-start;
gap: 8px;
border-radius: 2px;
background: var(--Secondary-500, #2DA5F3);
}

.second-banner-section .first-banner-card .introduction span{
    color: var(--Gray-00, #FFF);

    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    text-transform: uppercase;
}

.second-banner-section .first-banner-card .title{
    color: var(--Gray-900, #191C1F);

/* Heading/01 */
font-family: "Public Sans";
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 36px; /* 125% */
}

.second-banner-section .first-banner-card .describe{
    color: var(--Gray-700, #475156);

    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 150% */
}

.second-banner-section .first-banner-card .shop-now-btn{
    display: inline-flex;
    padding: 0px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    margin-top: 14px;
}

.second-banner-section .first-banner-card .shop-now-btn span{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.second-banner-section .first-banner-card .shop-now-btn svg{
    width: 18px;
    height: 18px;
}

/****/


.second-banner-section .second-banner-card{
    position: relative;
    overflow: hidden;
    width: 100%;
    /* height: 336px;  */
    display: flex;
    padding: 39px;
    justify-content: center;
    align-items: center;
    gap: 30px;
    border-radius: 4px;
    background: var(--Gray-900, #191C1F);
}

.second-banner-section .second-banner-card .introduction{
display: inline-flex;
padding: 4px 8px;
align-items: flex-start;
gap: 8px;
border-radius: 2px;
background: var(--Warning-400, #EFD33D);
}

.second-banner-section .second-banner-card .introduction span{
    color: var(--Gray-900, #191C1F);

    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 142.857% */
    text-transform: uppercase;
}

.second-banner-section .second-banner-card .title{
    color: var(--Gray-00, #FFF);

    /* Heading/01 */
    font-family: "Public Sans";
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px; /* 125% */
}

.second-banner-section .second-banner-card .describe{
    color: var(--Gray-300, #ADB7BC);

    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
}

.second-banner-section .second-banner-card .shop-now-btn{
    display: inline-flex;
    padding: 0px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    margin-top: 14px;
}

.second-banner-section .second-banner-card .shop-now-btn span{
    color: var(--Gray-00, #FFF);

    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; /* 342.857% */
    letter-spacing: 0.168px;
    text-transform: uppercase;
}

.second-banner-section .second-banner-card .shop-now-btn svg{
    width: 18px;
    height: 18px;
}

.second-banner-section .second-banner-card .second-banner-card-img{
    position: absolute;
    top: 70px;
    right: 20px;
    z-index: 100;
    /* width: 312px; */
    width: 220px;
    height: 300px;
}

.second-banner-section .second-banner-card img{
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

}

@media(min-width: 300px) AND (max-width: 768px){
    
    .second-banner-section{
        width: 100%;
        height: 100%;
        background: #FFF;
    }
    
    .second-banner-section .first-banner-card{
        display: flex;
        padding: 36px;
        justify-content: center;
        align-items: center;
        gap: 34px;
        border-radius: 4px;
        background: var(--Gray-50, #F2F4F5);
    }
    
    .second-banner-section .first-banner-card .introduction{
    display: inline-flex;
    padding: 3px 6px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 2px;
    background: var(--Secondary-500, #2DA5F3);
    }
    
    .second-banner-section .first-banner-card .introduction span{
        color: var(--Gray-00, #FFF);
    
        /* Body/Small/600 */
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px; /* 142.857% */
        text-transform: uppercase;
    }
    
    .second-banner-section .first-banner-card .title{
        color: var(--Gray-900, #191C1F);
    
    /* Heading/01 */
    font-family: "Public Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px; /* 125% */
    }
    
    .second-banner-section .first-banner-card .describe{
        color: var(--Gray-700, #475156);
    
        /* Body/Medium/400 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px; /* 150% */
    }
    
    .second-banner-section .first-banner-card .shop-now-btn{
        display: inline-flex;
        padding: 0px 16px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        border-radius: 2px;
        background: var(--Primary-500, #FA8232);
        margin-top: 14px;
    }
    
    .second-banner-section .first-banner-card .shop-now-btn span{
        color: var(--Gray-00, #FFF);
    
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px; /* 342.857% */
        letter-spacing: 0.168px;
        text-transform: uppercase;
    }
    
    .second-banner-section .first-banner-card .shop-now-btn svg{
        width: 16px;
        height: 16px;
    }
    
    /****/
    
    
    .second-banner-section .second-banner-card{
        position: relative;
        overflow: hidden;
        width: 100%;
        /* height: 336px;  */
        display: flex;
        padding: 36px;
        justify-content: center;
        align-items: center;
        gap: 30px;
        border-radius: 4px;
        background: var(--Gray-900, #191C1F);
    }
    
    .second-banner-section .second-banner-card .introduction{
    display: inline-flex;
    padding: 3px 6px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 2px;
    background: var(--Warning-400, #EFD33D);
    }
    
    .second-banner-section .second-banner-card .introduction span{
        color: var(--Gray-900, #191C1F);
    
        /* Body/Small/600 */
        font-family: "Public Sans";
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px; /* 142.857% */
        text-transform: uppercase;
    }
    
    .second-banner-section .second-banner-card .title{
        color: var(--Gray-00, #FFF);
    
        /* Heading/01 */
        font-family: "Public Sans";
        font-size: 22px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px; /* 125% */
    }
    
    .second-banner-section .second-banner-card .describe{
        color: var(--Gray-300, #ADB7BC);
    
        /* Body/Medium/400 */
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px; /* 150% */
    }
    
    .second-banner-section .second-banner-card .shop-now-btn{
        display: inline-flex;
        padding: 0px 16px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        border-radius: 2px;
        background: var(--Primary-500, #FA8232);
        margin-top: 14px;
    }
    
    .second-banner-section .second-banner-card .shop-now-btn span{
        color: var(--Gray-00, #FFF);
    
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px; /* 342.857% */
        letter-spacing: 0.168px;
        text-transform: uppercase;
    }
    
    .second-banner-section .second-banner-card .shop-now-btn svg{
        width: 18px;
        height: 18px;
    }
    
    .second-banner-section .second-banner-card .second-banner-card-img{
        position: absolute;
        top: 145px;
        right: 10px;
        z-index: 100;
        /* width: 312px; */
        width: 150px;
        height: 220px;
    }
    
    .second-banner-section .second-banner-card img{
        width: 100%;
        height: 100%;
        flex-shrink: 0;
    }
    
}
/*********************************************************************************************************************************************/

/********************************************************Featured Product Media Queries******************************************************/
@media(min-width: 770px) AND (max-width: 1024px){
    
    .featured-product-discount-banner{
    width: 100%;
    height: 702px;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--Warning-300, #F3DE6D);
    }
    
    .featured-product-discount-banner .category-name{
        color: var(--Danger-600, #BE4646);
    text-align: center;
    
    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    }
    
    .featured-product-discount-banner .discount-percentage{
        color: var(--Gray-900, #191C1F);
    text-align: center;
    
    /* Heading/01 */
    font-family: "Public Sans";
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 125% */
    }
    
    .featured-product-discount-banner .short-title{
        color: var(--Gray-700, #475156);
    text-align: center;
    
    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    }
    
    .featured-product-discount-banner .offer-ends-in{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    }
    
    .featured-product-discount-banner .ends-of-christmas{
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 2px;
    background: var(--Gray-00, #FFF);
    
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    }
    
    .featured-product-discount-banner .shop-now-btn{
    display: inline-flex;
    padding: 0px 18px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    background: var(--Primary-500, #FA8232);
    
    color: var(--Gray-00, #FFF);
    
    /* Heading/06 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 350% */
    letter-spacing: 0.192px;
    text-transform: uppercase;
    }
    
    .featured-product-discount-banner img{
    width: 100%;
    /* height: 428px; */
    height: 440px;
    flex-shrink: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    }
    
    .featured-product .title{
        font-size: 20px;
    }

    .featured-product .filtering .nav-link.active{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    
    display: flex;
    padding: 6px;
    align-items: center;
    gap: 8px;
    /* border-bottom: 2px solid #FA8232; */
    background: var(--Gray-00, #FFF);
    box-shadow: 0px -2px 0px 0px #FA8232 inset;
    } 
    
    .featured-product .filtering .nav-link{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .featured-product .filtering .view-all-btn .browse-all{
    color: var(--Primary-500, #FA8232);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    }
    
    .featured-product .filtering .view-all-btn svg{
        width: 16px;
        height: 16px;
    }
    
    
    .featured-product .featured-product-card{
        position: relative; 
        overflow: hidden;
        /* width: 248px; */
        width: 100%;
        height: 320px;
        border-radius: 3px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
    }
    
    .featured-product-card .card .card-body{
        margin: 0;
        padding: 0;
        padding: 15px;
    }
    
    .featured-product-card .image-container {
            position: relative;
    }
        
    .featured-product-card .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
            opacity: 0;
            transition: opacity 0.3s ease;
    }
        
    .featured-product-card:hover .image-overlay {
            opacity: 1;
    }
        
        .featured-product-card:hover .wishlist-cart-preview {
            display: flex !important;
        }
        
        .featured-product-card .sold-out-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 4px 8px;
        align-items: flex-start;
        gap: 8px;
        border-radius: 2px;
        background: var(--Gray-400, #929FA5);
        }
        
        .featured-product-card .sold-out-tag span{
            color: var(--Gray-00, #FFF);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; /* 133.333% */
        }
        
        .featured-product-card .off{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 4px 8px;
            align-items: flex-start;
            gap: 8px;
            border-radius: 2px;
            background: var(--Warning-400, #EFD33D);
        }
        
        .featured-product-card .off span{
            color: var(--Gray-900, #191C1F);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; /* 133.333% */
        }
        
        .featured-product-card .hot-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 4px 8px;
        align-items: flex-start;
        gap: 8px;
        border-radius: 2px;
        background: var(--Danger-500, #EE5858);
        }
        
        .featured-product-card .hot-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
    
        .featured-product-card .best-deals-tag{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 4px 8px;
            align-items: flex-start;
            gap: 8px;
            border-radius: 2px;
            background: var(--Secondary-500, #2DA5F3);
        }
            
        .featured-product-card .best-deals-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
        }
    
        .featured-product-card .sale{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 4px 8px;
            align-items: flex-start;
            gap: 8px;
            border-radius: 2px;
            background: var(--Success-500, #2DB224);
        }
            
        .featured-product-card .sale span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
        
        .featured-product-card .wishlist-cart-preview{
            position: absolute;
            top: 27%;
            left: 8%;
            display: none;
        }
        
        .featured-product-card .wishlist-cart-preview .wishlist-div-icon{
        display: flex;
        /* padding: 12px; */
        width: 35px !important;
        height: 35px !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 50%;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 5px;
        }
        
        .featured-product-card .wishlist-cart-preview .cart-icon{
            display: flex;
            /* padding: 12px; */
            width: 35px;
            height: 35px;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border-radius: 50%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 5px;
        }
        
        .featured-product-card .wishlist-cart-preview .preview-icon{
                display: flex;
                /* padding: 12px; */
                width: 35px;
                height: 35px;
                align-items: center;
                justify-content: center;
                gap: 6px;
                border-radius: 100%;
                /* background: var(--Gray-00, #62a7c2); */
                background: var(--Gray-00, #FFF);
                margin: 0 5px;
        }
        
        .featured-product-card .wishlist-cart-preview .wishlist-div-icon svg{
        width: 18px;
        height: 18px;
        color: black;
        }
        
        .featured-product-card .wishlist-cart-preview .cart-icon svg{
            width: 18px;
            height: 18px;
            color: black;
        }
        
        .featured-product-card .wishlist-cart-preview .preview-icon svg{
                width: 18px;
                height: 18px;
                color: black;
        }
        
        .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .featured-product-card .wishlist-cart-preview .cart-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .featured-product-card .wishlist-cart-preview .preview-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
            color: white;
        }
        
        .featured-product-card .wishlist-cart-preview .cart-icon:hover svg{
            color: white;
        }
        
        .featured-product-card .wishlist-cart-preview .preview-icon:hover svg{
            color: white;
        }
        
        .featured-product-card img{
            /* width: 216px; */
        width: 100%;
        height: 172px;
        flex-shrink: 0;
        }
        
        .featured-product-card .product-name{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }
        
        .featured-product-card .actual-price{
            color: var(--Gray-400, #929FA5);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px; /* 142.857% */
        text-decoration-line: strikethrough;
        padding-top: 5px;
        }
        
        .featured-product-card .product-price{
            color: var(--Secondary-500, #2DA5F3);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 18px;
            padding-top: 5px;
        }
    
        .featured-product-card .rating{
            padding: 5px 0px;
        }
        
        .featured-product-card .rating .icon svg{
            width: 14px;
            height: 14px;
        }
        
        .featured-product-card .rating .count{
            color: var(--Gray-500, #77878F);
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px;
        }
}

@media(min-width: 430px) AND (max-width: 768px){
    
    .featured-product-discount-banner{
    width: 100%;
    height: 700px;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--Warning-300, #F3DE6D);
    }
    
    .featured-product-discount-banner .category-name{
        color: var(--Danger-600, #BE4646);
    text-align: center;
    
    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    }
    
    .featured-product-discount-banner .discount-percentage{
        color: var(--Gray-900, #191C1F);
    text-align: center;
    
    /* Heading/01 */
    font-family: "Public Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px; /* 125% */
    }
    
    .featured-product-discount-banner .short-title{
        color: var(--Gray-700, #475156);
    text-align: center;
    
    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    }
    
    .featured-product-discount-banner .offer-deadline{
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .featured-product-discount-banner .offer-ends-in{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Small/500 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    }
    
    .featured-product-discount-banner .ends-of-christmas{
    display: flex;
    flex-direction: column !important;
    padding: 4px 8px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 2px;
    background: var(--Gray-00, #FFF);
    
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    }
    
    .featured-product-discount-banner .shop-now-btn{
    display: inline-flex;
    padding: 0px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 3px;
    background: var(--Primary-500, #FA8232);
    
    color: var(--Gray-00, #FFF);
    
    /* Heading/06 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px; /* 350% */
    letter-spacing: 0.192px;
    text-transform: uppercase;
    }
    
    .featured-product-discount-banner img{
    width: 100%;
    /* height: 428px; */
    height: 420px;
    flex-shrink: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    }
    
    .featured-product .title{
        font-size: 16px;
    }


    .featured-product .filtering .nav-link.active{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    
    display: flex;
    padding: 6px;
    align-items: center;
    gap: 8px;
    /* border-bottom: 2px solid #FA8232; */
    background: var(--Gray-00, #FFF);
    box-shadow: 0px -2px 0px 0px #FA8232 inset;
    } 
    
    .featured-product .filtering .nav-link{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    margin: 0 !important;
    padding: 0 !important;
    padding: 0px 4px 4px 4px !important;
    }
    
    .featured-product .filtering .view-all-btn .browse-all{
    color: var(--Primary-500, #FA8232);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    }
    
    .featured-product .filtering .view-all-btn svg{
        width: 14px;
        height: 14px;
    }
    
    
    .featured-product .featured-product-card{
        position: relative; 
        overflow: hidden;
        /* width: 248px; */
        width: 100%;
        height: 320px;
        border-radius: 3px;
        border: 1px solid var(--Gray-100, #E4E7E9);
        background: var(--Gray-00, #FFF);
    }
    
    .featured-product-card .card .card-body{
        margin: 0;
        padding: 0;
        padding: 12px;
    }
    
    .featured-product-card .image-container {
            position: relative;
    }
        
    .featured-product-card .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
            opacity: 0;
            transition: opacity 0.3s ease;
    }
        
    .featured-product-card:hover .image-overlay {
            opacity: 1;
    }
        
        .featured-product-card:hover .wishlist-cart-preview {
            display: flex !important;
        }
        
        .featured-product-card .sold-out-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 3px 6px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 2px;
        background: var(--Gray-400, #929FA5);
        }
        
        .featured-product-card .sold-out-tag span{
            color: var(--Gray-00, #FFF);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 15px; /* 133.333% */
        }
        
        .featured-product-card .off{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 3px 6px;
            align-items: flex-start;
            gap: 8px;
            border-radius: 2px;
            background: var(--Warning-400, #EFD33D);
        }
        
        .featured-product-card .off span{
            color: var(--Gray-900, #191C1F);
        
            /* Body/Tiny/600 */
            font-family: "Public Sans";
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; /* 133.333% */
        }
        
        .featured-product-card .hot-tag{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 3px 6px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 2px;
        background: var(--Danger-500, #EE5858);
        }
        
        .featured-product-card .hot-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
    
        .featured-product-card .best-deals-tag{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 3px 6px;
            align-items: flex-start;
            gap: 6px;
            border-radius: 2px;
            background: var(--Secondary-500, #2DA5F3);
        }
            
        .featured-product-card .best-deals-tag span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
        }
    
        .featured-product-card .sale{
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-flex;
            padding: 3px 6px;
            align-items: flex-start;
            gap: 6px;
            border-radius: 2px;
            background: var(--Success-500, #2DB224);
        }
            
        .featured-product-card .sale span{
            color: var(--Gray-00, #FFF);
            font-family: "Public Sans";
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px; 
        }
        
        .featured-product-card .wishlist-cart-preview{
            position: absolute;
            top: 27%;
            left: 10%;
            display: none;
        }
        
        .featured-product-card .wishlist-cart-preview .wishlist-div-icon{
        display: flex;
        /* padding: 12px; */
        width: 25px !important;
        height: 25px !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 50%;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 3px;
        }
        
        .featured-product-card .wishlist-cart-preview .cart-icon{
            display: flex;
            /* padding: 12px; */
            width: 25px;
            height: 25px;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border-radius: 50%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 3px;
        }
        
        .featured-product-card .wishlist-cart-preview .preview-icon{
                display: flex;
                /* padding: 12px; */
                width: 25px;
                height: 25px;
                align-items: center;
                justify-content: center;
                gap: 6px;
                border-radius: 100%;
                /* background: var(--Gray-00, #62a7c2); */
                background: var(--Gray-00, #FFF);
                margin: 0 3px;
        }
        
        .featured-product-card .wishlist-cart-preview .wishlist-div-icon svg{
        width: 14px;
        height: 14px;
        color: black;
        }
        
        .featured-product-card .wishlist-cart-preview .cart-icon svg{
            width: 14px;
            height: 14px;
            color: black;
        }
        
        .featured-product-card .wishlist-cart-preview .preview-icon svg{
                width: 14px;
                height: 14px;
                color: black;
        }
        
        .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .featured-product-card .wishlist-cart-preview .cart-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .featured-product-card .wishlist-cart-preview .preview-icon:hover {
            background: var(--Primary-500, #FA8232);
        }
        
        .featured-product-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
            color: white;
        }
        
        .featured-product-card .wishlist-cart-preview .cart-icon:hover svg{
            color: white;
        }
        
        .featured-product-card .wishlist-cart-preview .preview-icon:hover svg{
            color: white;
        }
        
        .featured-product-card img{
            /* width: 216px; */
        width: 100%;
        height: 150px;
        flex-shrink: 0;
        }
        
        .featured-product-card .product-name{
            color: var(--Gray-900, #191C1F);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px;
            
        }
        
        .featured-product-card .actual-price{
            color: var(--Gray-400, #929FA5);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        text-decoration-line: strikethrough;
        padding-top: 5px;
        }
        
        .featured-product-card .product-price{
            color: var(--Secondary-500, #2DA5F3);
            font-family: "Public Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
            padding-top: 5px;
        }
    
        .featured-product-card .rating{
            padding: 4px 0px;
        }
        
        .featured-product-card .rating .icon svg{
            width: 12px;
            height: 12px;
        }
        
        .featured-product-card .rating .count{
            color: var(--Gray-500, #77878F);
            font-family: "Public Sans";
            font-size: 11px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px;
        }
}
/**------------------------------------------------------Featured Product Media Queries End------------------------------------------------**/


/********************************************************Shop With Category******************************************************************/
@media (min-width:430px) AND (max-width: 768px){
    
.shop-with-category-section{
    position: relative;
    width: 100%;
    height: 100%;
    background: #FFF;
}

.shop-with-category {
    position: relative;
    height: 100%;
}

.custom-category-swiper-button-next{
    position: absolute;
    top: 40%;
    right: -2.5%;
    z-index: 100;
    display: inline-flex;
    height: 35px;
    padding: 8px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 100px;
background: var(--Primary-500, #FA8232);
}

.custom-category-swiper-button-prev{
    position: absolute;
    top: 40%;
    left: -2.5%;
    z-index: 100;
    display: inline-flex;
    height: 35px;
    padding: 8px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 100px;
background: var(--Primary-500, #FA8232);
}

.custom-category-swiper-button-next svg{
    width: 20px;
    height: 20px;
}

.custom-category-swiper-button-prev svg{
    width: 20px;
    height: 20px;
}

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

.shop-with-category .card{
border-radius: 4px;
border: 1px solid var(--Gray-100, #E4E7E9);
background: var(--Gray-00, #FFF);
}

.shop-with-category .card img{
width: 130px;
height: 130px;
}

.shop-with-category .card .category-title{
color: var(--Gray-900, #191C1F);
text-align: center;
font-family: "Public Sans";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}
}

@media (min-width:300px) AND (max-width: 425px){
    
    .shop-with-category-section{
        position: relative;
        width: 100%;
        height: 100%;
        background: #FFF;
    }
    
    .shop-with-category {
        position: relative;
        height: 100%;
    }
    
    .custom-category-swiper-button-next{
        position: absolute;
        top: 43%;
        right: -0.5%;
        z-index: 100;
        display: inline-flex;
        height: 35px;
        padding: 8px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 100px;
    background: var(--Primary-500, #FA8232);
    }
    
    .custom-category-swiper-button-prev{
        position: absolute;
        top: 43%;
        left: -0.5%;
        z-index: 100;
        display: inline-flex;
        height: 35px;
        padding: 8px;
        align-items: flex-start;
        gap: 10px;
        border-radius: 100px;
    background: var(--Primary-500, #FA8232);
    }
    
    .custom-category-swiper-button-next svg{
        width: 20px;
        height: 20px;
    }
    
    .custom-category-swiper-button-prev svg{
        width: 20px;
        height: 20px;
    }
    
    .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;
    }
    
    .shop-with-category .card{
    border-radius: 4px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .shop-with-category .card img{
    width: 130px;
    height: 130px;
    }
    
    .shop-with-category .card .category-title{
    color: var(--Gray-900, #191C1F);
    text-align: center;
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    }
}
/********************************************************************************************************************************************/

/****************************************************Hot Deals Section Media Queries*********************************************************/
@media (min-width: 770px) AND (max-width: 1024px){

        .hot-deals-offer-card .add-to-card-btn{
        display: flex;
        padding: 12px 4px;
        justify-content: center;
        align-items: center;
        gap: 3px;
        border-radius: 2px;
        background: var(--Primary-500, #FA8232);
        }
        
        .hot-deals-offer-card .add-to-card-btn svg{
        width: 17px;
        height: 17px;
        }
        
        .hot-deals-offer-card .add-to-card-btn .add-card-title{
            color: var(--Gray-00, #FFF);
        
        /* Heading/07 */
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        /* line-height: 20px;  */
        letter-spacing: 0.168px;
        text-transform: uppercase;
        }

        
.hot-deals-card .wishlist-cart-preview{
    position: absolute;
    top: 35%;
    left: 10%;
    display: none;
}

.hot-deals-card .wishlist-cart-preview .wishlist-div-icon{
display: flex;
/* padding: 12px; */
width: 35px !important;
height: 35px !important;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 50%;
/* background: var(--Gray-00, #62a7c2); */
background: var(--Gray-00, #FFF);
margin: 0 5px;
}

.hot-deals-card .wishlist-cart-preview .cart-icon{
    display: flex;
    /* padding: 12px; */
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 50%;
    /* background: var(--Gray-00, #62a7c2); */
    background: var(--Gray-00, #FFF);
    margin: 0 5px;
}

.hot-deals-card .wishlist-cart-preview .preview-icon{
        display: flex;
        /* padding: 12px; */
        width: 35px;
        height: 35px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 50%;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 5px;
}

.hot-deals-card .wishlist-cart-preview .wishlist-div-icon svg{
width: 20px;
height: 20px;
color: black;
}

.hot-deals-card .wishlist-cart-preview .cart-icon svg{
    width: 20px;
    height: 20px;
    color: black;
}

.hot-deals-card .wishlist-cart-preview .preview-icon svg{
        width: 20px;
        height: 20px;
        color: black;
}

.hot-deals-card .wishlist-cart-preview .wishlist-div-icon:hover {
    background: var(--Primary-500, #FA8232);
}

.hot-deals-card .wishlist-cart-preview .cart-icon:hover {
    background: var(--Primary-500, #FA8232);
}

.hot-deals-card .wishlist-cart-preview .preview-icon:hover {
    background: var(--Primary-500, #FA8232);
}

.hot-deals-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
    color: white;
}

.hot-deals-card .wishlist-cart-preview .cart-icon:hover svg{
    color: white;
}

.hot-deals-card .wishlist-cart-preview .preview-icon:hover svg{
    color: white;
}

}

@media (min-width: 430px) AND (max-width: 768px){

    
.hot-deals .section-title{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; 
}
    
.hot-deals .deals-ends-in{
        color: #000;
    
        /* Body/Small/400 */
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px; /* 142.857% */
}
    
.hot-deals .offer-remaining-time{
    display: flex;
    padding: 4px 8px;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
    background: var(--Warning-300, #F3DE6D);
}
    
.hot-deals .offer-remaining-time span{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Medium/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 150% */
}
    
.hot-deals .section-all-product-view-url a{
        color: var(--Secondary-500, #2DA5F3);
    
    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 142.857% */
}
    
.hot-deals .section-all-product-view-url svg{
        color: var(--Secondary-500, #2DA5F3);
        width: 18px;
        height: 18px;
}
    
.hot-deals .hot-deals-offer-card{
    /* position: relative; */
    width: 100%;
    height: 592px;
    flex-shrink: 0;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
}
    
.hot-deals-offer-card .card-body{
    padding: 10px;
}
    
.hot-deals-offer-card .off{
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    padding: 4px 8px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 2px;
    background: var(--Warning-400, #EFD33D);
}
    
.hot-deals-offer-card .off span{
        color: var(--Gray-900, #191C1F);
    
        /* Body/Tiny/600 */
        font-family: "Public Sans";
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px; /* 133.333% */
}
    
.hot-deals-offer-card .hot-tag{
        position: absolute;
    top: 45px;
    left: 10px;
        display: inline-flex;
        padding: 3px 6px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 2px;
    background: var(--Danger-500, #EE5858);
}
    
    .hot-deals-offer-card .hot-tag span{
        color: var(--Gray-00, #FFF);
    
    /* Body/Tiny/600 */
    font-family: "Public Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 133.333% */
    }
    
    .hot-deals-offer-card img{
    width: 250px;
    height: 258px;
    flex-shrink: 0;
    }
    
    .rating{
        padding: 3px 0px;
    }
    
    .rating .icon svg{
        width: 18px;
        height: 18px;
    }
    
    .rating .count{
    color: var(--Gray-500, #77878F);
    
    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; 
    }
    
    .hot-deals-offer-card .product-name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    padding: 5px 0px;
    }
    
    .hot-deals-offer-card .price .actual-price{
        color: var(--Gray-300, #ADB7BC);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 150% */
    text-decoration-line: strikethrough;
    }
    
    .hot-deals-offer-card .price .current-price{
        color: var(--Secondary-500, #2DA5F3);
    
        /* Body/Large/600 */
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px; /* 133.333% */
    }
    
    .hot-deals-offer-card .product-short-detail{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    padding: 5px 0px;
    }
    
    .hot-deals-offer-card .wishlist,.preview{
    display: flex;
    /* padding: 12px; */
    width: 25px;
    height: 25px;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 3px;
    background: var(--Primary-100, #FFE7D6);
    }
    
    .hot-deals-offer-card .wishlist svg{
    width: 16px;
    height: 16px;
    }
    
    .hot-deals-offer-card .preview svg{
        width: 20px;
        height: 20px;
    }
    
    .hot-deals-offer-card .add-to-card-btn{
    display: flex;
    padding: 3px 3px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    }
    
    .hot-deals-offer-card .add-to-card-btn svg{
    width: 14px;
    height: 14px;
    }
    
    .hot-deals-offer-card .add-to-card-btn .add-card-title{
        color: var(--Gray-00, #FFF);
    
    /* Heading/07 */
    font-family: "Public Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    /* line-height: 20px;  */
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
    .hot-deals .hot-deals-card{
    position: relative; 
    overflow: hidden;
    /* width: 248px; */
    width: 100%;
    height: 296px;
    flex-shrink: 0;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    }
    
    .hot-deals-card .image-container {
        position: relative;
    }
    
    .hot-deals-card .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); /* Adjusted opacity */
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .hot-deals-card:hover .image-overlay {
        opacity: 1;
    }
    
    .hot-deals-card:hover .wishlist-cart-preview {
        display: flex !important;
    }
    
    .hot-deals-card .sold-out-tag{
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    padding: 3px 6px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 2px;
    background: var(--Gray-400, #929FA5);
    }
    
    .hot-deals-card .sold-out-tag span{
        color: var(--Gray-00, #FFF);
    
        /* Body/Tiny/600 */
        font-family: "Public Sans";
        font-size: 10px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; /* 133.333% */
    }
    
    .hot-deals-card .off{
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        padding: 3px 6px;
        align-items: flex-start;
        gap: 6px;
        border-radius: 2px;
        background: var(--Warning-400, #EFD33D);
    }
    
    .hot-deals-card .off span{
        color: var(--Gray-900, #191C1F);
    
        /* Body/Tiny/600 */
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; /* 133.333% */
    }
    
    .hot-deals-card .hot-tag{
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    padding: 3px 6px;
    align-items: flex-start;
    gap: 6px;
    border-radius: 2px;
    background: var(--Danger-500, #EE5858);
    }
    
    .hot-deals-card .hot-tag span{
        color: var(--Gray-00, #FFF);
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px; 
    }
    
    .hot-deals-card .wishlist-cart-preview{
        position: absolute;
        top: 35%;
        left: 10%;
        display: none;
    }
    
    .hot-deals-card .wishlist-cart-preview .wishlist-div-icon{
    display: flex;
    /* padding: 12px; */
    width: 25px !important;
    height: 25px !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 50%;
    /* background: var(--Gray-00, #62a7c2); */
    background: var(--Gray-00, #FFF);
    margin: 0 5px;
    }
    
    .hot-deals-card .wishlist-cart-preview .cart-icon{
        display: flex;
        /* padding: 12px; */
        width: 25px;
        height: 25px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 50%;
        /* background: var(--Gray-00, #62a7c2); */
        background: var(--Gray-00, #FFF);
        margin: 0 5px;
    }
    
    .hot-deals-card .wishlist-cart-preview .preview-icon{
            display: flex;
            /* padding: 12px; */
            width: 25px;
            height: 25px;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border-radius: 50%;
            /* background: var(--Gray-00, #62a7c2); */
            background: var(--Gray-00, #FFF);
            margin: 0 5px;
    }
    
    .hot-deals-card .wishlist-cart-preview .wishlist-div-icon svg{
    width: 18px;
    height: 18px;
    color: black;
    }
    
    .hot-deals-card .wishlist-cart-preview .cart-icon svg{
        width: 14px;
        height: 14px;
        color: black;
    }
    
    .hot-deals-card .wishlist-cart-preview .preview-icon svg{
            width: 14px;
            height: 14px;
            color: black;
    }
    
    .hot-deals-card .wishlist-cart-preview .wishlist-div-icon:hover {
        background: var(--Primary-500, #FA8232);
    }
    
    .hot-deals-card .wishlist-cart-preview .cart-icon:hover {
        background: var(--Primary-500, #FA8232);
    }
    
    .hot-deals-card .wishlist-cart-preview .preview-icon:hover {
        background: var(--Primary-500, #FA8232);
    }
    
    .hot-deals-card .wishlist-cart-preview .wishlist-div-icon:hover svg{
        color: white;
    }
    
    .hot-deals-card .wishlist-cart-preview .cart-icon:hover svg{
        color: white;
    }
    
    .hot-deals-card .wishlist-cart-preview .preview-icon:hover svg{
        color: white;
    }
    
    .hot-deals-card img{
        /* width: 216px; */
    width: 100%;
    height: 150px;
    flex-shrink: 0;
    }
    
    .hot-deals-card .product-name{
        color: var(--Gray-900, #191C1F);
    
    /* Body/Small/400 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    }
    
    .hot-deals-card .actual-price{
        color: var(--Gray-400, #929FA5);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    text-decoration-line: strikethrough;
    padding-top: 5px;
    }
    
    .hot-deals-card .product-price{
        color: var(--Secondary-500, #2DA5F3);
    
    /* Body/Small/600 */
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    padding-top: 5px;
    }

}

@media(min-width:300px) AND (max-width: 425px){
    .hot-deals-card .wishlist-cart-preview{
        position: absolute;
        top: 35%;
        left: 30%;
        display: none;
    }
}
/****************************************************Hot Deals Section Queries End*********************************************************/


/****************************************************Abous Service Media Queries*********************************************************/
@media(min-width: 770px) AND (max-width: 1024px){
    .about-service-section{
        width: 100%;
        height: 100%;
        background: #FFF;
    }
    
    .about-service-section .about-service{
    border-radius: 6px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    border-radius: 6px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    padding: 18px;
    }
    
    .about-service-section .about-service .svg-icon{
        width: 35px;
        height: 35px;
    }
    
    .about-service-section .about-service .title{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        text-transform: uppercase;
    }
    
    .about-service-section .about-service .short-detail{
        color: var(--Gray-600, #5F6C72);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }

    .about-service-section .about-service .vertical-line{
        width: 1px;
        height: 56px;
        background: #E4E7E9;
    }
    
}

@media(min-width: 300px) AND (max-width: 768px){
    .about-service-section{
        width: 100%;
        height: 100%;
        background: #FFF;
    }
    
    .about-service-section .about-service{
    border-radius: 6px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    border-radius: 6px;
    border: 1px solid var(--Gray-100, #E4E7E9);
    background: var(--Gray-00, #FFF);
    padding: 15px 5px;
    }
    
    .about-service-section .about-service .svg-icon{
        width: 32px;
        height: 32px;
    }
    
    .about-service-section .about-service .title{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        text-transform: uppercase;
    }
    
    .about-service-section .about-service .short-detail{
        color: var(--Gray-600, #5F6C72);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }

    .about-service-section .about-service .vertical-line{
        width: 1px;
        height: 56px;
        background: #E4E7E9;
    }
    
}
/********************************************************************************************************************************************/

/* **************************************************Slider and Banner Media Queries******************************************************** */
@media (min-width : 770px) AND (max-width: 1024px){

    .slider-banner-section{
        width: 100%;
        height: 100%;
        background: #FFF;
    }
    
    .main-slider{
        position: relative;
        height: 100%;
    }
    
    .main-slider .swiper {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {
        bottom: var(--swiper-pagination-bottom,20px);
        top: var(--swiper-pagination-top,auto);
        left: -258px;
        width: 100%
    }
    
    .swiper-pagination-bullet-active {
        opacity: var(--swiper-pagination-bullet-opacity, 1);
        background: black;
    }
    
    .main-slider .swiper-slide {
        text-align: center;
        font-size: 16px;
        /* background: #fff; */
        border-radius: 6px;
        background: var(--Gray-50, #F2F4F5);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .main-slider .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .main-slider .short-title{
    color: var(--Secondary-600, #2484C2);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    }
    
    .main-slider .title{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 40px;
        font-style: normal;
        font-weight: 600;
        line-height: 56px;
    }
    
    .main-slider .describe{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    }
    
    .main-slider .shop-now-btn{
    display: flex;
    width: 140px;
    /* padding: 0px 10px; */
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    background: var(--Primary-500, #FA8232);
    
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0.192px;
    text-transform: uppercase;
    }
    
    .main-slider .shop-now-btn svg{
    width: 18px;
    height: 18px;
    color: var(--Gray-00, #FFF);
    }
    
    .main-slider .slider-image{
    width: 250px;
    height: 300px;
    flex-shrink: 0;
    }
    
    .main-slider .slider-image img{
    width: 100%;
    height: 100%;
    /* width: 368px; */
    /* height: 408px; */
    flex-shrink: 0;
    object-fit: cover;
    }
    
    .main-slider .slider-right{
        position: relative;
    }
    
    .main-slider .slider-right .slider-image-price{
        position: absolute;
        top: 0;
        right: 30px;
    display: inline-flex;
    /* padding: 0px 21px 0px 23px; */
    width: 80px;
    height: 80px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 80px;
    border: 4px solid var(--Gray-00, #FFF);
    background: var(--Secondary-500, #2DA5F3);
    }
    
    .main-slider .slider-right .slider-image-price span{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 100px;
    }
    
    .main-banner .first-banner{
    /* width: 424px; */
    width: 100%;
    height: 200px;
    border-radius: 6px;
    background: var(--Gray-900, #191C1F);
    }
    
    .main-banner .first-banner .card-body{
        position: relative;
        overflow: hidden;
    }
    
    .main-banner .first-banner .summar-sale{
    color: var(--Warning-500, #EBC80C);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
    text-transform: uppercase;
    }
    
    .main-banner .first-banner .pro-name{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    }
    
    .main-banner .first-banner .shop-now-btn{
        display: flex;
        /* padding: 0px 15px; */
        width: 120px;
        height: 40px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 2px;
        background: var(--Primary-500, #FA8232);
        
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
        
    .main-banner .first-banner .shop-now-btn svg{
        width: 18px;
        height: 18px;
        color: var(--Gray-00, #FFF);
    }
    
    .main-banner .first-banner .right-side{
        position: relative;
    }
    
    .right-image {
        width: 200px;
        height: 200px;
        position: absolute;
        right: -38px;
        bottom: -55px;
    }
    
    .first-banner .right-side .off{
    position: absolute;
    top: 14%;
    right: 8%;
    z-index: 100;
    display: flex;
    width: 95px;
    height: 36px;
    /* padding: 8px 16px; */
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--Warning-400, #EFD33D);
    }
    
    .first-banner .right-side .off span{
    color: #141414;
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; 
    }
    
    .main-banner .second-banner{
        /* width: 424px; */
        display: flex;
    /* padding: 40px 40px 40px 32px; */
    justify-content: center;
    align-items: center;
    gap: 20px;
        width: 100%;
        height: 200px;
        border-radius: 6px;
        background: var(--Gray-50, #F2F4F5);
    }
    
    .main-banner .second-banner .left-image{
    width: 130px;
    height: 130px;
    }
    
    .main-banner .second-banner .left-image img{
        width: 130px;
        height: 130px;
    }
    
    .main-banner .second-banner .pro-name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    }
    
    .main-banner .second-banner .pro-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
    }
    
    .main-banner .second-banner .shop-now-btn{
        display: flex;
        /* padding: 0px 15px; */
        width: 120px;
        height: 40px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 2px;
        background: var(--Primary-500, #FA8232);
        
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
        
    .main-banner .second-banner .shop-now-btn svg{
        width: 18px;
        height: 18px;
        color: var(--Gray-00, #FFF);
    }

}

@media (min-width : 430px) AND (max-width: 768px){

    .slider-banner-section{
        width: 100%;
        height: 100%;
        background: #FFF;
    }
    
    .main-slider{
        position: relative;
        height: 100%;
    }
    
    .main-slider .swiper {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {
        bottom: var(--swiper-pagination-bottom,20px);
        top: var(--swiper-pagination-top,auto);
        left: -180px;
        width: 100%
    }
    
    .swiper-pagination-bullet-active {
        opacity: var(--swiper-pagination-bullet-opacity, 1);
        background: black;
    }
    
    .main-slider .swiper-slide {
        text-align: center;
        font-size: 14px;
        /* background: #fff; */
        border-radius: 6px;
        background: var(--Gray-50, #F2F4F5);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .main-slider .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .main-slider .short-title{
    color: var(--Secondary-600, #2484C2);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    padding-bottom: 5px;
    }
    
    .main-slider .title{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 32px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px;
    }
    
    .main-slider .describe{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    }
    
    .main-slider .shop-now-btn{
    display: flex;
    width: 120px;
    /* padding: 0px 10px; */
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 3px;
    background: var(--Primary-500, #FA8232);
    
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 0.192px;
    text-transform: uppercase;
    }
    
    .main-slider .shop-now-btn svg{
    width: 14px;
    height: 14px;
    color: var(--Gray-00, #FFF);
    }
    
    .main-slider .slider-image{
    width: 180px;
    height: 220px;
    flex-shrink: 0;
    }
    
    .main-slider .slider-image img{
    width: 100%;
    height: 100%;
    /* width: 368px; */
    /* height: 408px; */
    flex-shrink: 0;
    object-fit: cover;
    }
    
    .main-slider .slider-right{
        position: relative;
    }
    
    .main-slider .slider-right .slider-image-price{
        position: absolute;
        top: 0;
        right: 15px;
    display: inline-flex;
    /* padding: 0px 21px 0px 23px; */
    width: 60px;
    height: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 60px;
    border: 4px solid var(--Gray-00, #FFF);
    background: var(--Secondary-500, #2DA5F3);
    }
    
    .main-slider .slider-right .slider-image-price span{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 100px;
    }
    
    .main-banner .first-banner{
    /* width: 424px; */
    width: 100%;
    height: 180px;
    border-radius: 6px;
    background: var(--Gray-900, #191C1F);
    }
    
    .main-banner .first-banner .card-body{
        position: relative;
        overflow: hidden;
    }
    
    .main-banner .first-banner .summar-sale{
    color: var(--Warning-500, #EBC80C);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; 
    text-transform: uppercase;
    }
    
    .main-banner .first-banner .pro-name{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    }
    
    .main-banner .first-banner .shop-now-btn{
        display: flex;
        /* padding: 0px 15px; */
        width: 90px;
        height: 32px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 2px;
        background: var(--Primary-500, #FA8232);
        
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
        
    .main-banner .first-banner .shop-now-btn svg{
        width: 16px;
        height: 16px;
        color: var(--Gray-00, #FFF);
    }
    
    .main-banner .first-banner .right-side{
        position: relative;
    }
    
    .right-image {
        width: 160px;
        height: 160px;
        position: absolute;
        right: -50px;
        bottom: -55px;
    }
    
    .first-banner .right-side .off{
    position: absolute;
    top: 27%;
    right: -6%;
    z-index: 100;
    display: flex;
    width: 85px;
    height: 32px;
    /* padding: 8px 16px; */
    align-items: flex-start;
    gap: 6px;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--Warning-400, #EFD33D);
    }
    
    .first-banner .right-side .off span{
    color: #141414;
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; 
    }
    
    .main-banner .second-banner{
        /* width: 424px; */
        display: flex;
    /* padding: 40px 40px 40px 32px; */
    justify-content: center;
    align-items: center;
    gap: 20px;
        width: 100%;
        height: 180px;
        border-radius: 6px;
        background: var(--Gray-50, #F2F4F5);
    }
    
    .main-banner .second-banner .left-image{
    width: 100px;
    height: 100px;
    }
    
    .main-banner .second-banner .left-image img{
        width: 100px;
        height: 100px;
    }
    
    .main-banner .second-banner .pro-name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    }
    
    .main-banner .second-banner .pro-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
    }
    
    .main-banner .second-banner .shop-now-btn{
        display: flex;
        /* padding: 0px 15px; */
        width: 95px;
        height: 35px;
        justify-content: center;
        align-items: center;
        gap: 6px;
        border-radius: 2px;
        background: var(--Primary-500, #FA8232);
        
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
        
    .main-banner .second-banner .shop-now-btn svg{
        width: 18px;
        height: 18px;
        color: var(--Gray-00, #FFF);
    }

}

@media (min-width : 300px) AND (max-width: 425px){

    .slider-banner-section{
        width: 100%;
        height: 100%;
        background: #FFF;
    }
    
    .main-slider{
        position: relative;
        height: 100%;
    }
    
    .main-slider .swiper {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {
        bottom: var(--swiper-pagination-bottom,20px);
        top: var(--swiper-pagination-top,auto);
        left: 0;
        width: 100%;
        margin-top: 10px;
    }
    
    .swiper-pagination-bullet-active {
        opacity: var(--swiper-pagination-bullet-opacity, 1);
        background: black;
    }
    
    .main-slider .swiper-slide {
        text-align: center;
        font-size: 12px;
        /* background: #fff; */
        border-radius: 6px;
        background: var(--Gray-50, #F2F4F5);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .main-slider .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .main-slider .short-title{
    color: var(--Secondary-600, #2484C2);
    font-family: "Public Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    padding-bottom: 5px;
    }
    
    .main-slider .title{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 26px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px;
    }
    
    .main-slider .describe{
    color: var(--Gray-700, #475156);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    }
    
    .main-slider .shop-now-btn{
    display: flex;
    width: 100px;
    /* padding: 0px 10px; */
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 3px;
    background: var(--Primary-500, #FA8232);
    
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0.192px;
    text-transform: uppercase;
    }
    
    .main-slider .shop-now-btn svg{
    width: 12px;
    height: 12px;
    color: var(--Gray-00, #FFF);
    }
    
    .main-slider .slider-image{
    width: 150px;
    height: 180px;
    flex-shrink: 0;
    text-align: center;
    }
    
    .main-slider .slider-image img{
    width: 100%;
    height: 100%;
    /* width: 368px; */
    /* height: 408px; */
    flex-shrink: 0;
    object-fit: cover;
    text-align: center;
    }
    
    .main-slider .slider-right{
        position: relative;
        text-align: center;
        margin-bottom: 15px;
    }
    
    .main-slider .slider-right .slider-image-price{
        position: absolute;
        top: 0;
        left: 120px;
    display: inline-flex;
    /* padding: 0px 21px 0px 23px; */
    width: 60px;
    height: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 60px;
    border: 4px solid var(--Gray-00, #FFF);
    background: var(--Secondary-500, #2DA5F3);
    }
    
    .main-slider .slider-right .slider-image-price span{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 100px;
    }
    
    .main-banner .first-banner{
    /* width: 424px; */
    width: 100%;
    height: 150px;
    border-radius: 6px;
    background: var(--Gray-900, #191C1F);
    }
    
    .main-banner .first-banner .card-body{
        position: relative;
        overflow: hidden;
    }
    
    .main-banner .first-banner .summar-sale{
    color: var(--Warning-500, #EBC80C);
    font-family: "Public Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; 
    text-transform: uppercase;
    }
    
    .main-banner .first-banner .pro-name{
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    }
    
    .main-banner .first-banner .shop-now-btn{
        display: flex;
        /* padding: 0px 15px; */
        width: 80px;
        height: 28px;
        justify-content: center;
        align-items: center;
        gap: 6px;
        border-radius: 2px;
        background: var(--Primary-500, #FA8232);
        
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
        
    .main-banner .first-banner .shop-now-btn svg{
        width: 14px;
        height: 14px;
        color: var(--Gray-00, #FFF);
    }
    
    .main-banner .first-banner .right-side{
        position: relative;
    }
    
    .right-image {
        width: 140px;
        height: 140px;
        position: absolute;
        right: -38px;
        bottom: -45px;
    }
    
    .first-banner .right-side .off{
    position: absolute;
    top: -89px;
    right: -6px;
    z-index: 100;
    display: flex;
    width: 80px;
    height: 32px;
    /* padding: 8px 16px; */
    align-items: flex-start;
    gap: 6px;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--Warning-400, #EFD33D);
    }
    
    .first-banner .right-side .off span{
    color: #141414;
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; 
    }
    
    .main-banner .second-banner{
        /* width: 424px; */
        display: flex;
    /* padding: 40px 40px 40px 32px; */
    justify-content: center;
    align-items: center;
    gap: 10px;
        width: 100%;
        height: 180px;
        border-radius: 6px;
        background: var(--Gray-50, #F2F4F5);
    }
    
    .main-banner .second-banner .left-image{
    width: 80px;
    height: 80px;
    }
    
    .main-banner .second-banner .left-image img{
        width: 80px;
        height: 80px;
    }
    
    .main-banner .second-banner .pro-name{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 15px;
    margin-top: -15px;

    }
    
    .main-banner .second-banner .pro-price{
        color: var(--Secondary-500, #2DA5F3);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 14px;
    }
    
    .main-banner .second-banner .shop-now-btn{
        display: flex;
        /* padding: 0px 15px; */
        width: 90px;
        height: 32px;
        justify-content: center;
        align-items: center;
        gap: 6px;
        border-radius: 2px;
        background: var(--Primary-500, #FA8232);
        
    color: var(--Gray-00, #FFF);
    font-family: "Public Sans";
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
        
    .main-banner .second-banner .shop-now-btn svg{
        width: 16px;
        height: 16px;
        color: var(--Gray-00, #FFF);
    }

}
/*********************************************************************************************************************************************/

/* ** Navigation Media queries ** */
@media(min-width: 770px) AND (max-width: 1024px) {
    
    .navigation{
        /* display: flex; */
    /* width: 1920px; */
    /* padding: 16px 300px; */
    /* justify-content: space-between; */
    /* align-items: center; */
        background: var(--Gray-00, #FFF);
        box-shadow: 0px -1px 0px 0px #E4E7E9 inset;
    }
    
    .navigation  .site-logo .icon svg{
        width: 26px;
        height: 26px;
        fill: #1B6392;
    } 
        
    .navigation .site-logo span,.navbar-brand{
        color: #1B6392;
        font-family: "Public Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        /* line-height: 0px; */
        letter-spacing: -0.64px;
    }
    
    .navigation .all-categories{
    position: relative;
    display: flex;
    width: 100px;
    height: 36px;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    background: var(--Gray-50, #F2F4F5);
    cursor: pointer;
    flex-shrink: 0;
    }
    
    .navigation .all-categories-menu{
        position: absolute;
        top: 43px;
        left: 0;
        /* max-width: 240px; */
        width: 180px;
        /* width: 100%; */
        border-radius: 6px;
        background: var(--Gray-00, #FFF);
        box-shadow: 0px -1px 0px 0px #E4E7E9 inset;
    }
    
    .navigation .all-categories-menu .nav-item:hover{
    
    border-radius: 6px;
    background: var(--Gray-50, #F2F4F5);
    
    }    
    
    .navigation .all-categories-menu .nav-item:hover .nav-link,svg{
    
        color: black;
        
    }  
    
    .navigation .all-categories-menu .nav-link,svg{
        color: var(--Gray-700, #475156);
    
    /* Body/Large/400 */
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    }
    
    .navigation .all-categories span{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }
    
    .navigation .all-categories i{
        font-size: 13px;
    }
    
    .navigation .track-order a,.compare a,.customer-support a,.need-help a{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
    }
    
    .navigation .track-order svg,.compare svg,.customer-support svg,.need-help svg{
        width: 18px;
        height: 18px;
    }
    
    .navigation .all-categories-menu-item{
        position: absolute;
        top: 0;
        left: 190px;
        /* max-width: 760px; */
        width: 700px;
        /* width: 100%; */
    }
    
    .navigation .all-categories-menu-item .sub-item .nav-item:hover{
        border-radius: 6px;
        background: var(--Gray-50, #F2F4F5);
    }
    
    
    .navigation .all-categories-menu-item .featured-phones-title{
        font-size: 16px;
    }

    .navigation .featured-phones .pro-title{
        color: var(--Gray-600, #5F6C72);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; 
    }
    
    .navigation .featured-phones .pro-price{
        color: #1B6392;
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; 
    }
    
    .navigation .discount{
        width: 100%;
        height: 100%;
        background-color: var(--Warning-500, #efe197);
        border-radius: 5px;
        padding: 3px;
    }
    
    .navigation .discount img{
        width: 80px;
        height: 80px;
    }
    
    .navigation .discount h5{
        font-size: 20px;
    }
    
    .navigation .discount p,span{
    color: var(--Gray-900, #45525f);
    font-family: "Public Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .navigation .discount span{
        color: var(--Gray-900, #45525f);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .navigation .discount .price{
        background: white;
        padding: 10px;
        line-height: 20px;
        border-radius: 5px;
        font-weight: bold;
    }
    
    .navigation .discount .shop-now{
    display: inline-flex;
    padding: 0px 30px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    color: var(--Gray-00, #FFF);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 45px; 
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
    .navigation .contact a{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    }
    
    .navigation .contact svg{
        width: 20px;
        height: 20px;
    }
    
    

}

@media(min-width: 426px) AND (max-width: 768px) {
    
    .navigation{
        /* display: flex; */
    /* width: 1920px; */
    /* padding: 16px 300px; */
    /* justify-content: space-between; */
    /* align-items: center; */
        background: var(--Gray-00, #FFF);
        box-shadow: 0px -1px 0px 0px #E4E7E9 inset;
    }
    
    .navigation  .site-logo .icon svg{
        width: 22px;
        height: 22px;
        fill: #1B6392;
    } 
        
    .navigation .site-logo span,.navbar-brand{
        color: #1B6392;
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        /* line-height: 0px; */
        letter-spacing: -0.64px;
    }
    
    .navigation .all-categories{
    position: relative;
    display: flex;
    width: 80px;
    height: 30px;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    background: var(--Gray-50, #F2F4F5);
    cursor: pointer;
    }
    
    .navigation .all-categories-menu{
        position: absolute;
        top: 35px;
        left: 0;
        /* max-width: 240px; */
        width: 150px;
        /* width: 100%; */
        border-radius: 6px;
        background: var(--Gray-00, #FFF);
        box-shadow: 0px -1px 0px 0px #E4E7E9 inset;
    }
    
    .navigation .all-categories-menu .nav-item:hover{
    
    border-radius: 6px;
    background: var(--Gray-50, #F2F4F5);
    
    }    
    
    .navigation .all-categories-menu .nav-item:hover .nav-link,svg{
    
        color: black;
        
    }  
    
    .navigation .all-categories-menu .nav-link,svg{
        color: var(--Gray-700, #475156);
    
    /* Body/Large/400 */
    font-family: "Public Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    }
    
    .navigation .all-categories span{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }
    
    .navigation .all-categories i{
        font-size: 12px;
    }
    
    .navigation .track-order a,.compare a,.customer-support a,.need-help a{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
    }
    
    .navigation .track-order svg,.compare svg,.customer-support svg,.need-help svg{
        width: 16px;
        height: 16px;
    }
    
    .navigation .all-categories-menu-item{
        position: absolute;
        top: 0;
        left: 165px;
        /* max-width: 760px; */
        width: 520px;
        /* width: 100%; */
    }
    
    .navigation .all-categories-menu-item .sub-item .nav-item:hover{
        border-radius: 6px;
        background: var(--Gray-50, #F2F4F5);
    }
    
    /* .navigation .all-categories-menu-item .featured-phones-card{
        display: none;
    } */
    
    .navigation .all-categories-menu-item .featured-phones-title{
        font-size: 14px;
    }

    .navigation .featured-phones .pro-title{
        color: var(--Gray-600, #5F6C72);
        font-family: "Public Sans";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; 
    }
    
    .navigation .featured-phones .pro-price{
        color: #1B6392;
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px; 
    }
    
    .navigation .discount{
        width: 100%;
        height: 100%;
        background-color: var(--Warning-500, #efe197);
        border-radius: 5px;
        padding: 3px;
    }
    
    .navigation .discount img{
        width: 70px;
        height: 70px;
    }
    
    .navigation .discount h5{
        font-size: 18px;
    }
    
    .navigation .discount p,span{
    color: var(--Gray-900, #45525f);
    font-family: "Public Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    }
    
    .navigation .discount span{
        color: var(--Gray-900, #45525f);
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }
    
    .navigation .discount .price{
        background: white;
        padding: 8px;
        line-height: 15px;
        border-radius: 5px;
        font-weight: bold;
    }
    
    .navigation .discount .shop-now{
    display: inline-flex;
    padding: 0px 15px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;
    background: var(--Primary-500, #FA8232);
    color: var(--Gray-00, #FFF);
    
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; 
    letter-spacing: 0.168px;
    text-transform: uppercase;
    }
    
    .navigation .contact a{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    }
    
    .navigation .contact svg{
        width: 18px;
        height: 18px;
    }
    
    

}

@media(max-width: 425px) {

    
    .navigation .all-categories-menu{
        position: absolute;
        top: 44px;
        left: 0;
        /* max-width: 240px; */
        width: 152px;
        /* width: 100%; */
        border-radius: 6px;
        background: var(--Gray-00, #FFF);
        box-shadow: 0px -1px 0px 0px #E4E7E9 inset;
    }
    
    .navigation .all-categories-menu .nav-item:hover{
    
    border-radius: 6px;
    background: var(--Gray-50, #F2F4F5);
    
    }    
    
    .navigation .all-categories-menu .nav-item:hover .nav-link,svg{
    
        color: black;
        
    }  
    
    .navigation .all-categories-menu .nav-link,svg{
        color: var(--Gray-700, #475156);
    
    /* Body/Large/400 */
    font-family: "Public Sans";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
    }
    
    .navigation .all-categories span{
        color: var(--Gray-900, #191C1F);
        font-family: "Public Sans";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }
    
    .navigation .all-categories i{
        font-size: 12px;
    }
    
    .navigation .track-order a,.compare a,.customer-support a,.need-help a{
    color: var(--Gray-600, #5F6C72);
    font-family: "Public Sans";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
    }
    
    .navigation .track-order svg,.compare svg,.customer-support svg,.need-help svg{
        width: 16px;
        height: 16px;
    }
    
    .navigation .all-categories-menu-item{
        position: absolute;
        top: 0;
        left: 160px;
        /* max-width: 760px; */
        width: 120px;
        /* width: 100%; */
    }
    
    .navigation .all-categories-menu-item .sub-item .nav-item:hover{
        border-radius: 6px;
        background: var(--Gray-50, #F2F4F5);
    }
    
    /* .navigation .all-categories-menu-item .featured-phones-card{
        display: none;
    } */

    .navigation .contact a{
    color: var(--Gray-900, #191C1F);
    font-family: "Public Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    }
    
    .navigation .contact svg{
        width: 18px;
        height: 18px;
    }
    
}
/*********************************************************************************************************************************************/


/* ** Top Banner Section Media Qu ** */
@media (min-width: 425px) AND (max-width: 1024px){
    .top-banner-section .top-banner-close-btn{
        position: absolute;
        top: 20px;
        right: 5px;
        z-index: 1;
        display: inline-flex;
        width: 25px;height: 25px;
        align-items: flex-start;
        gap: 10px;
        /* padding: 8px; */
        border-radius: 2px;
        background: var(--Gray-800, #303639);cursor: pointer;
    }
}
/*********************************************************************************************************************************************/