.logo-header .search-box .categori-container {
    z-index: 10
}

.categories_menu_inner>ul>li.dropdown_list .link-area>span {
    width: 100%
}

.categories_menu_inner>ul>li a {
    display: block
}

.mainmenu-area {
    height: 40px
}

.mainmenu-area .categories_menu .categories_title h2 {
    padding: 0 15px
}

.mainmenu-area .categories_menu .categories_title h2 {
    height: 50px;
    line-height: 50px
}

.second-div i.arrow-down {
    margin-top: 5px;
    margin-left:0;
    
}

.categories_title h2 {
    margin-bottom: 2px
}

.contact-us .right-area .social-links ul li a.facebook {
    background: #3b5999
}

.contact-us .right-area .social-links ul li a.twitter {
    background: #55acee
}

.contact-us .right-area .social-links ul li a.google-plus {
    background: #f77737
}

.contact-us .right-area .social-links ul li a.linkedin {
    background: #0077b5
}

.contact-us .right-area .social-links ul li a.dribbble {
    background: #c4302b
}

.fa-dribbble:before {
    content: "\f167"
}

.contact-us .right-area .social-links ul li a.pinterest {
    background: #bd081c
}

#product-details-tab #comment-area .write-comment-area .submit-btn {
    border: 1px solid #f50;
    border-radius: 50px;
    padding: 12px 30px
}

.mainmenu-area .core-nav,
.mainmenu-area .core-nav .wrap-core-nav-list .core-nav-list li,
.mainmenu-area .core-nav .wrap-core-nav-list .core-nav-list li a,
.mainmenu-area .core-nav .wrap-core-nav-list.right .mainmenu-area .core-nav .wrap-core-nav-list .core-nav-list {
    height: 40px !important
}

.mainmenu-area .core-nav .full-container {
    height: auto
}

.mainmenu-area .core-nav .wrap-core-nav-list .core-nav-list {
    margin: 0 !important;
    height: 40px;
    top: 0
}

.mainmenu-area nav .menu li a {
    line-height: 36px;
    padding: 0 20px
}

.mainmenu-area .core-nav .wrap-core-nav-list.right {
    text-align: right;
    margin-top: -1px
}

.trending-item-slider.owl-carousel .owl-stage {
    margin: 10px 0 10px !important
}

nav .menu li a {
    position: relative
}

.top-header .content .right-content .list ul {
    display: block
}

.top-header .content .right-content .list li {
    display: inline-block;
    height: 22px;
    position: relative
}

.top-header .content .right-content .list li .nice-select {
    display: inline-block;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    color: #000;
    padding: 0 25px 0 0;
    border: 0
}

.top-header .content .right-content .list li .nice-select ul li {
    display: block
}

.top-header .content .right-content .list li .language-selector i {
    color: #000
}

.top-header .content .right-content .list li .currency-selector {
    position: relative;
    top: 5px
}

.top-header .content .right-content .list li .sell-btn {
    font-size: 13px;
    font-weight: 600;
    color: #000;
    border: 1px solid #000
}

.top-header .content .right-content .list li .track-btn {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    border-radius: 50px;
    padding: 3px 15px;
    background: 0 0
}

.top-header .content .right-content .list li .track-btn:hover {
    background: #f50;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in
}

.subscribe-preloader-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 999
}

.subscribePreloader__thumb {
    width: 50%;
    height: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.subscribePreloader__text {
    background: #0163d2c7;
    width: 60%;
    margin: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    position: relative;
    padding: 30px
}

.subscribePreloader__text form {
    margin-top: 30px
}

.subscribePreloader__text h1,
.subscribePreloader__text p {
    color: #fff
}

.subscribePreloader__text button,
.subscribePreloader__text input {
    border: none;
    height: 40px
}

.subscribePreloader__text input {
    width: 70%;
    margin-right: 5px;
    padding-left: 10px
}

.subscribePreloader__text button {
    font-weight: 600;
    width: 25%;
    background: #333;
    color: #fff;
    -webkit-transition: all .4s ease-in;
    transition: all .4s ease-in
}

.subscribePreloader__text button:hover {
    background: #fff;
    color: #333
}

.subscribePreloader__thumb span {
    display: block;
    position: absolute;
    right: -10px;
    top: -10px;
    background: #fff;
    height: 25px;
    width: 25px;
    line-height: 25px;
    text-align: center;
    color: #333;
    font-size: 12px;
    border-radius: 100%;
    cursor: pointer
}

.top-area {
    text-align: center
}

.top-area .content .heading {
    font-size: 30px;
    font-weight: 700;
    color: #04af04
}

.top-area .content .text {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 26px
}

.top-area .content .link {
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline
}

.top-area .content {
    margin-bottom: 30px
}

.product-header-title h2 {
    font-size: 18px;
    font-weight: 600
}

#color-bar {
    width: 20px;
    height: 20px;
    margin-left: 5px
}

#errCVC,
#errCard {
    color: red;
    font-size: 12px;
    padding-bottom: 10px;
    display: block
}

input.form-control.card-elements {
    margin-bottom: 5px !important
}

.top-header .left-content .list ul li .language-selector {
    position: relative
}

.top-header .left-content .list ul li .language-selector i {
    color: #ffba00;
    font-size: 13px;
    position: absolute;
    top: 4px;
    left: -11px
}

.top-header .left-content .list ul li .currency-selector {
    display: flex;
    padding-top: 2px
}

.top-header .left-content .list ul li .currency-selector span {
    color: #000;
    font-size: 13px;
    position: relative;
    top: 0
}

.top-header .left-content .list ul li .nice-select:after {
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    content: '';
    display: block
}

.top-header .left-content .list ul li .nice-select li {
    margin-right: 0 !important;
    width: 100%
}

.item {
    border: 1px solid rgba(0, 0, 0, .1) !important;
    margin-bottom: 30px
}

.item:hover {
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .05) !important;
    border: 1px solid rgba(0, 0, 0, .1) !important
}

.trending-item-slider .owl-stage {
    padding: 10px 0 10px
}

.top-header ul li.my-dropdown.profilearea {
    display: block;
    position: relative
}

.top-header ul li.my-dropdown.profilearea .profile .text {
    height: auto;
    padding: 0;
    font-size: 13px;
    color: #000;
    width: 100%;
    margin-left: 15px
}

.top-header ul li.my-dropdown.profilearea .profile .text i {
    font-size: 12px
}

.top-header ul li.my-dropdown.profilearea .my-dropdown-menu .profile-links li {
    display: block;
    margin-right: 0;
    margin: 4px 0
}

.top-header ul li.my-dropdown.profilearea .my-dropdown-menu .profile-links li a i {
    font-size: 13px
}

.top-header ul li.my-dropdown.profilearea .my-dropdown-menu .profile-links li a {
    font-size: 16px
}

.top-header {
    padding: 0 !important
}

.top-header ul li.my-dropdown.profilearea .my-dropdown-menu .profile-links li a {
    font-size: 14px;
    font-weight: 600
}

.top-header .content .right-content .list li {
    height: auto;
    line-height: unset
}

.top-header .content .right-content .list li.login .links {
    font-size: 14px;
    color: #000
}

.top-header .content .right-content {
    display: flex
}

.top-header .content .right-content .list li.login {
    margin-left: 15px
}

.checkout-area .content-box .content .order-area .order-item .product-content p {
    position: relative;
    top: -3px
}

.logo-header .helpful-links ul li .wish i,
.logo-header .helpful-links ul li.my-dropdown .cart .icon i {
    font-size: 32px;
    color: #5d5d5d;
    background: 0 0;
    height: auto;
    line-height: unset !important
}

.logo-header .helpful-links ul li .wish p,
.logo-header .helpful-links ul li.my-dropdown .cart p {
    margin-top: 0
}

.logo-header .search-box .search-form input::placeholder {
    color: rgba(255, 255, 255, .2)
}

.logo-header .search-box .search-form input::-webkit-placeholder {
    color: rgba(255, 255, 255, .2)
}

.logo-header .search-box .search-form input::-moz-placeholder {
    color: rgba(255, 255, 255, .2)
}

.top-header {
    border-bottom: 1px solid #e8e8e8
}

.logo-header .search-box {
    border: 1px solid rgba(0, 0, 0, .3)
}

.report-area a {
    font-size: 14px;
    color: #888;
    margin-top: 10px;
    display: inline-block
}

.modal-header {
    border: none !important;
    padding: 0 15px !important
}

.modal-header .close {
    position: absolute;
    right: 5px;
    top: 4px;
    background: #fff;
    opacity: 1 !important;
    width: 25px;
    height: 25px;
    overflow: hidden;
    text-align: center;
    line-height: 25px;
    padding: 0;
    border-radius: 50%;
    font-size: 33px;
    font-weight: 600 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    z-index: 5
}

.modal-header .close:hover {
    color: #ea272b;
    font-weight: 600 !important;
    opacity: 1 !important
}

#track-order-modal .modal-header {
    border: none !important;
    padding: 11px 15px 0 !important
}

@media (min-width:992px) {
    .helpful-links .helpful-links-inner li.my-dropdown:hover #cart-items {
        display: block
    }
}

#vendorform,
#vendorform1 .modal-header {
    padding: 1rem 1rem !important
}

.common-padding {
    padding: 4px 2px !important
}

.nice-select .list {
    z-index: 9999
}

.logo-header .search-box-wrapper {
    padding: 10px 10px
}

.message-modal .modal .modal-dialog {
    z-index: 9999999
}

.sub-categori .left-area .filter-result-area .body-area .filter-list li .content .check-box .form-check input {
    z-index: 2
}

.sub-categori .left-area .filter-result-area .body-area .filter-list li .content .check-box .form-check .checkmark {
    z-index: -1
}

.sub-categori .left-area .filter-result-area .body-area .filter-list li .content .check-box .form-check label {
    margin-left: 0;
    padding-left: 30px
}

.categories_title {
    display: none;
    transition: top 0.3s;
}

.login-area .to-login-page a {
    font-size: 14px
}

.categories_menu_inner>ul {
    align-items: center;
    display: flex;
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: 0 auto
}

.mainmenu-area .categories_menu .categories_menu_inner {
    padding-top: 0 !important
}

.mainmenu-bb {
    border-bottom: 1px solid rgba(0, 0, 0, .07) !important;
    height: 74px;
    background-color: #002e5b
}

div#comment-log-reg {
    z-index: 9999
}

.mybtn1.copy {
    width: 40px;
    height: 40px;
    text-align: center;
    padding: 0;
    display: inline-block
}

.sub-categori .left-area .filter-result-area .body-area {
    padding: 20px 15px 30px
}

.sub-categori .left-area .filter-result-area .body-area .filter-list li a i {
    font-size: 12px
}

.sub-categori .left-area .filter-result-area .body-area .filter-list li a {
    font-size: 14px
}

.sub-categori .left-area .tags-area .body-area .sub-title {
    font-size: 14px;
    font-weight: 600
}

.sub-categori .left-area .tags-area .body-area {
    padding: 10px 15px 21px
}

.sub-categori .left-area .filter-result-area .header-area .title,
.sub-categori .left-area .tags-area .header-area .title {
    font-weight: 600;
    position: relative
}

.billing-add-area #tform input {
    width: 100%;
    border-radius: 50px;
    height: 40px;
    font-size: 14px;
    padding: 0 20px;
    border: 1px solid rgba(0, 0, 0, .1)
}

.wholesell-details-page {
    background: rgba(15, 120, 242, .06);
    margin-bottom: 15px;
    display: block
}

.wholesell-details-page h3 {
    font-size: 18px;
    font-weight: 600;
    display: block;
    text-align: center;
    padding: 10px 10px 6px;
    color: #000
}

.wholesell-details-page tr td,
.wholesell-details-page tr th {
    font-size: 14px
}

.wholesell-details-page tr th {
    padding: 6px 10px
}

.wholesell-details-page tr td {
    padding: 4px 15px
}

.estimate-time {
    font-size: 15px;
    margin-top: 9px;
    margin-bottom: 0
}

.p-sku {
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 0
}

.p-sku span {
    font-weight: 600
}

.mybadge {
    font-size: 13px;
    color: #fff;
    background: green;
    border-radius: 5px;
    padding: 1px 10px;
    font-weight: 600
}

.mybadge1 {
    font-size: 13px;
    color: #fff;
    background: red;
    border-radius: 5px;
    padding: 1px 10px;
    font-weight: 600
}

p.product-unit-price {
    font-weight: 700 !important
}

.stor-name {
    position: relative;
    display: inline-block
}

.verify-link {
    color: green;
    position: absolute;
    right: -25px;
    top: 0
}

.verify-link:hover {
    color: green
}

.subscribePreloader__text h1 {
    font-size: 35px !important
}

.subscribePreloader__text button {
    font-size: 11px !important
}

.autocomplete-items {
    box-shadow: 0 2px 7px rgba(0, 0, 0, .10980392156862745)
}

.docname {
    width: 100% !important;
    border-bottom: 1px solid rgba(84, 82, 82, .09) !important
}

.docname a {
    display: flex
}

.docname a img {
    width: 50px;
    height: 50px
}

.docname a .search-content {
    flex: 1
}

.docname a .search-content p {
    margin-bottom: 0;
    font-size: 14px
}

.docname a .search-content span {
    color: #000 !important
}

.autocomplete-items {
    z-index: 2000;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .10980392156862745)
}

.docname {
    width: 100% !important;
    border-bottom: 1px solid rgba(84, 82, 82, .09) !important
}

.docname a {
    display: flex
}

.docname a img {
    width: 50px;
    height: 50px;
    object-fit: contain
}

.docname a .search-content {
    flex: 1
}

.docname a .search-content p {
    margin-bottom: 0;
    font-size: 14px
}

.docname a .search-content span {
    color: #000 !important
}

.item .info .price small {
    color: #ea272b;
    font-weight: 600
}
/* floating buttons css */
.fixed-box {
        position:fixed;
        top: 42%;
        right: 24px;
        transform: translateX(50%);
        
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1001;
}
/* @media (max-width: 991px) and (orientation: landscape) {
    .fixed-box {
       top: 105px!important;
    }
} */

.button-fixed-box{
      display: block;
        width: 2.5em;
        text-align: center;
            
        height: 2.5em;
        padding: 8px;
        background-color: #002e5b;
        border: 1px solid white;
        border-radius: 10px;
        text-align: left;
        cursor: pointer;
        
}
.icon-fixed-box:hover {
    color: #f0f0f0;
}
.icon-fixed-box {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    vertical-align: middle;
    font-size: 1.3em;
    color: #ffba00;
}

.close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #ffba00;
    font-size: 24px;
}
.popup-box {
    position: fixed;
    background-color: #ffffff;
    padding: 15px;
    border: 5px solid #002e5b;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    top: 25%;
    right: -200%; /* Start off-screen */
    transition: right 0.6s ease; /* Add transition effect */
    width: 500px;
    z-index: 1001;
  
    height: 350px; /* Set the height same as fixed-box */
    overflow-y: auto; /* Add vertical scroll if needed */
    
}
.info-popup-box {
    position: fixed;
    
    padding: 10px;
    
    
    top: 25%;
    right: -200%; /* Start off-screen */
    transition: right 0.6s ease; /* Add transition effect */
    width: 550px;
    z-index: 1001;

    display: flex;
    justify-content: right;
    height: 550px; /* Set the height same as fixed-box */
    
    
}
.inquiry-form-popup{
    position: fixed;
    background-color: #ffffff;
    padding: 30px;
    
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 4px solid #002e5b;
    transition: right 0.6s ease; /* Add transition effect */
    width: 500px;
    z-index: 1001;
    
  
    height: 400px;
    overflow-y: auto; /* Add vertical scroll if needed */
}

.inquiry-form-popup p{
font-size: 18px;
}
.floating-h2{
    position: absolute;
    background-color:#ffba00;
    transform: rotate(-90deg);
    top: 80px;
    padding: 6px;
    left: -55px;
    font-weight: bold;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    font-size: 22px;
}
.info-popup-box.open {
    right: 36px; /* Bring it into view */
}

.popup-box-cart {
    position: fixed;
    background-color: #ffffff;
    padding: 20px;
    border: 4px solid #002e5b;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    top: 1px;
    right: -200%; /* Start off-screen */
    transition: right 0.6s ease; /* Add transition effect */
    width: 350px;
    height: 100%; /* Set the height same as fixed-box */
    overflow-y: auto; /* Add vertical scroll if needed */
    z-index: 2000;
}
.cart-open .cart-overlay-popup-cart{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    transition: background-color 0.3s ease;
    z-index: 1050;
}
.cart-quantity {
    position: absolute;
    top: -8px; /* Adjust this value to your preference */
    right: -4px; /* Adjust this value to your preference */
    background-color: #04af04; /* Background color */
    color: white; /* Text color */
    border-radius: 50%; /* Make it a circle */
    padding: 3px 8px; /* Adjust padding as needed */
    font-size: 11px; /* Adjust font size as needed */
}
.cart-container {
    text-align: left; /* Center the content horizontally */
}
.cart-container p{
    font-size: 20px;
}
.popup-box-cart.open {
    right: 1px; /* Bring it into view */
}


.popup-box.open {
    right: 40px; /* Bring it into view */
}
#inquiryPopup form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#inquiryPopup form input[type="text"],
#inquiryPopup form input[type="email"],
#inquiryPopup form input[type="tel"],
#inquiryPopup form textarea,
#inquiryPopup form button {
    width: 100%;
    padding: 10px 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    box-sizing: border-box;
    font-size: 0.9em;
}
#add-image-btn{
    width: 50%!important;
}
#inquiryPopup form button {
    background-color: #ffba00;
    
    font-weight: bold;
    color: #002e5b;
    cursor: pointer;
}
#inquiryPopup form button:hover {
    color: #fff;
}

.phone-box{
    border-radius: 10px;
    text-align: center;
    color: black;
    background-color:#ffdc7d;
    
    
    
    
}
.popup-box-phone-icon{
    transform: none!important;
    color: #FFBA00;
    padding: 4px;
}
.popup-box h2{
    font-size: 1.5rem;
    font-weight: 700;
}
.popup-box h3{
    font-size: 1rem;
    font-weight: 700;
}

.popup-box .phone-box p{
    font-size: 40px;
}
.popup-box .phone-box p a{
    font-weight: 800;
    color: black;
}

.popup-box .phone-box:hover{
  
    color: white !important;
    background-color:#ffbb00;
    
}
.popup-box-phone-social-icon a{
    margin: 10px;
    padding: 7px 2px;
    text-align: center;
    display: inline-block;
    height: 40px;
    width: 40px;
    
    border-radius: 50%;
    background-color: #002e5b;
}
.popup-box-phone-social-icon a i{
    font-size: 25px;
    
    color: #ffba00;
}

.popup-box-phone-social-icon a i:hover{
   
    color: white;
}
.scrolled {
    top: 40px!important; /* Position when scrolled */
    
  }
.cart-container {
    display: flex;
    flex-direction: column;
    

}
.delete-product-cart{
    text-align: right;
}
.delete-btn-cart{
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center!important;
    background-color: #fff; /* Red background color */
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    font-weight: 500;
    color: black; /* White text color */
    border-radius: 50%; /* Makes it round */
    text-decoration: none; /* Removes default underline */;
}
.delete-btn-cart:hover {
    color: #cc0000; /* Darker red on hover */
}
.cart-products{
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #b1b1b1;
    text-align: left!important;
}

.buttons-container {
    margin-bottom: 10px; /* Add some space between buttons and product info */

}
.product-info-cart .product-image{
    height: 70px;
}

.product-info-cart{
    display: flex; 
    text-align: left!important;
}

.product-info-cart p{
    font-size: 18px!important;
}

.product-name {
    margin-right: 10px; /* Add some spacing between product name and image */
    font-size: 8px;
}



.buttons-container a {
    padding: 8px 20px;
    
    background-color:#ffba00;
    color: #002e5b;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-decoration: none;
    margin: 1px;
    margin-bottom: 10px;
}
.view-cart-btn{
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

.checkout-btn{
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
}

.buttons-container a:hover {
    color: white;
}
.subtotal {
    margin-top: 10px; /* Add space between product info and subtotal */
    font-weight: bold; /* Make subtotal text bold */
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width: 600px) {
   
    .popup-box{
        width: 300px!important;
    }
    .info-popup-box {
        width: 350px!important;
    }
    .inquiry-form-popup{
        width: 300px!important;
    }
    
.popup-box .phone-box p {
    font-size: 30px!important;
}
    
   
    
}
@media only screen and (max-width: 767px) {
    

    .fixed-box{
        top: 45%;

        
    }

    .popup-box{
        width: 300px!important;
    }
    .info-popup-box {
        width: 350px!important;
    }
    .inquiry-form-popup{
        width: 300px!important;
    }
    
.popup-box .phone-box p {
    font-size: 30px!important;
}
.cart-quantity{
    padding: 2px 4px; 
    font-size: 5px;
}
  }
/* Style for delete icon */
.delete-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    background-color: #ff0000; /* Red background color for the delete icon */
    color: #ffffff; /* Text color for the delete icon */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Style for delete icon hover */
.delete-icon:hover {
    background-color: #cc0000; /* Darker red background color on hover */
}

/* Style for delete icon hover */
.delete-icon i {
    margin: 0;
}

/* Style for file upload container */
#image-upload-container{
    width: 100%;
    
}
.file-upload-container {
    display: flex;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    
    border: 1px solid #ccc;
    color: white;
    border-radius:20px;
}

/* Style for upload button */
.add-image-button-box {
    
    background-color: #ffbb00; /* Green background color for the upload button */
    color: #002e5b; /* Text color for the upload button */
    padding: 10px 20px; /* Adjust padding as needed */
}

/* Style for file input */
.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 85%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Style for displaying file name */
.file-name {
    flex: 1;
    padding: 10px 10px; /* Adjust padding as needed */
    /* margin-right: 15px; */
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Style for cart icon and animation */
.cart-icon-home {
  width: 65px;
  height: 50px;
  cursor: pointer;
  transition: transform 0.2s ease;
  border: 2px solid #ffba00;
  border-radius: 6px;
}

.cart-icon-home:hover {
  transform: scale(1.1);
}

@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.cart-icon-home.cart-updating {
  animation: zoomIn 0.4s ease;
}

/* End of floating buttons css for cart succes modal box */
.shopping-cart-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2026;
    padding: 20px;
}

.shopping-cart-cart-modal-box {
    background: white;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 700px;
    width: 100%;
    overflow: hidden;
}

.shopping-cart-modal-header {
    background-color: #ffba00;
    color: white;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shopping-cart-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shopping-cart-check-icon {
    background: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shopping-cart-check-icon svg {
    width: 20px;
    height: 20px;
    color: #ffba00;
}

.shopping-cart-modal-title {
    font-size: 18px;
    font-weight: 600;
}

.shopping-cart-close-btn {
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.shopping-cart-close-btn:hover {
    background: rgba(0, 0, 0, 0.2);
}

.shopping-cart-close-btn svg {
    width: 20px;
    height: 20px;
    color: white;
}

.shopping-cart-modal-body {
    padding: 24px;
}

.shopping-cart-product-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shopping-cart-product-image {
    background: #f3f4f6;
    padding: 16px;
    border-radius: 8px;
}

.shopping-cart-product-placeholder {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shopping-cart-product-placeholder svg {
    width: 40px;
    height: 40px;
    color: #6b7280;
}

.shopping-cart-product-details {
    flex: 1;
}

.shopping-cart-product-name {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.shopping-cart-product-price {
    font-size: 28px;
    font-weight: bold;
    color: #10b981;
}

.shopping-cart-modal-footer {
    padding: 24px;
    background: #f9fafb;
    display: flex;
    gap: 16px;
}

.shopping-cart-btn {
    flex: 1;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.shopping-cart-btn-primary {
    background-color: #ffba00;
    color: white;
}

.shopping-cart-btn-primary:hover {
    background-color: #e6a800;
}

.shopping-cart-btn-secondary {
    background: white;
    color: #374151;
    border: 2px solid #d1d5db;
}

.shopping-cart-btn-secondary:hover {
    background: #f3f4f6;
}

.shopping-cart-hidden {
    display: none;
}