/*-----------------------------------------------------------------------------------


-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    1. Theme Default CSS (body, link color, section etc)
		1.2 Section Title
		1.3 Scrollup CSS
	2. Header Area CSS
		2.2 Social Icons
	3.  Header Bottom CSS
		3.2 Mainmenu CSS
		3.3 Submenu CSS
		3.4 Megamenu CSS
		3.5 Register Login CSS
	4.  Products Search
		4.2  Search Box
		4.3  Mini Cart
	5.  Slider Area
		5.2  Slider BG
		5.3  Banner
	6.  Products Area
		6.2  Products Tab
	7.  Sidebar
	8.  Product Offer Area
	9.  Brands
	10. Shop Page
	11. Bradcrumb
	12. Vertical Menu
	13. Product Details
	14. Shopping Cart
	15. Checkout
	16. Blog
	17. Blog Details
	18. Blog Comment
	19. Blog Comment Form
	20. Shop Compare
	21. Pagination
	22. About
	23. Contact
	24. FAQ
	25. Office Address
	26. 404 Message
	27. Coming Soon
	28. Hover Effect
	29. Footer
	30. Subscribe Area
	31. Copyright Area
	32. Etc

-----------------------------------------------------------------------------------*/

    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
    /*----------------------------------------*/
    /*  1.  Theme default CSS
/*----------------------------------------*/

    body {
        font-family: "Poppins", sans-serif !important;
        font-size: 14px;
        line-height: 26px;
        color: #ffffff00;
        font-weight: normal;
        overflow-x: hidden;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        color: #191919;
    }

    .container-fluid {
        max-width: 1800px;
    }

    /*----------------------------------------*/
    /*  1.2  Section Title */
    /*----------------------------------------*/

    .section-title h2 {
        /* font-size: 18px; */
        font-weight: 500;
        color: #191919;
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 8px;
        margin-bottom: 0;
        position: relative;
        z-index: -1;
        bottom: 21px;
    }

    .section-title h2::before {
        background-color: #254670;
        height: 3px;
        width: 140px;
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        margin-bottom: -1px;
    }

    .section-title h2 {
        font-size: 36px;
        color: #252525;
        font-weight: 500;
        margin-bottom: 2px;
    }

    .supplier-city-title h3 {
        font-weight: 500;
        color: #191919;
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 8px;
        margin-bottom: 0;
        position: relative;
        z-index: -1;
        bottom: 21px;
    }

    .supplier-city-title h3::before {
        background-color: #254670;
        height: 3px;
        width: 70px;
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        margin-bottom: -1px;
    }

    /*----------------------------------------*/
    /*  1.3  Scrollup CSS */
    /*----------------------------------------*/

    #scrollUp {
        font-size: 20px;
        transition: all 0.2s ease-in-out 0s;
        position: fixed;
        z-index: 99;
        bottom: 50px;
        right: 50px;
        display: inline-block;
        color: #fff;
        width: 45px;
        height: 45px;
        line-height: 40px;
        border-radius: 3px;
        text-align: center;
        background: #254670;
    }

    /*----------------------------------------*/
    /*  2.  Header Area CSS
/*----------------------------------------*/

    .header-top {
        background-color: #f5f5f5;
        height: 44px;
    }

    .header-top.style-2 {
        background-color: transparent;
        border-bottom: 1px solid #ebebeb;
    }

    .header-top .row {
        height: 40px;
    }

    .topbar-left ul li {
        font-size: 10px;
        text-transform: uppercase;
        display: inline-block;
        margin-right: 6px;
    }

    .topbar-left ul li:last-child {
        margin-right: 0;
    }

    .topbar-left ul li span {
        color: #27aefd;
    }

    .currency-bar {
        /* margin-right: 30px; */
    }

    .currency-bar ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .currency-bar ul li {
        font-size: 12px;
        display: inline-block;
        position: relative;
    }

    .currency-bar ul li span {
        color: #dcdcdc;
        margin-left: 30px;
    }

    .currency-bar ul li a {
        color: #4c4c4c;
    }

    .currency-bar>ul>li>a {
        line-height: 40px;
    }

    .currency-bar ul li a i {
        margin-left: 12px;
    }

    .lang-bar ul li a img {
        margin-right: 8px;
    }

    .currency-bar ul li ul {
        background-color: #fff;
        position: absolute;
        top: auto;
        left: auto;
        z-index: 999;
        visibility: hidden;
        opacity: 0;
        transition: 0.3s;
        border: 1px solid #ebebeb;
    }

    .currency-bar ul li:hover ul {
        visibility: visible;
        opacity: 1;
    }

    .currency-bar ul li ul li {
        display: block;
        border-bottom: 1px solid #ebebeb;
    }

    .currency-bar ul li ul li:last-child {
        border-bottom: none;
    }

    .currency-bar ul li ul li a {
        display: block;
        padding: 5px 25px;
    }

    .currency-bar ul li ul li a:hover {
        background-color: #f7f7f7;
    }

    /*----------------------------------------*/
    /*  2.2  Social Icons
/*----------------------------------------*/

    .social-icons a {
        font-size: 12px;
        color: #191919;
        display: inline-block;
        margin-right: 25px;
        line-height: 40px;
    }

    .social-icons a:last-child {
        margin-right: 0;
    }

    .social-icons a:hover {
        color: #e23e1d;
    }

    .social-icons.style-3 {
        padding-right: 30px;
    }

    .social-icons.style-3 a {
        font-size: 14px;
    }

    /*----------------------------------------*/
    /*  3.  Header Bottom
/*----------------------------------------*/

    .header-bottom .row {
        height: 100px;
    }

    .stick {
        top: 0;
        position: fixed;
        width: 100%;
        z-index: 9999;
        background-color: #fff;
        -webkit-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
        -webkit-animation: 900ms cubic-bezier(0.2, 1, 0.22, 1) 0s normal none 1 running fadeInDown;
        animation: 900ms cubic-bezier(0.2, 1, 0.22, 1) 0s normal none 1 running fadeInDown;
    }

    .header-bottom.stick,
    .mobile-header.stick,
    .mainmenu-area.stick {
        background-color: #fff;
        z-index: 9999;
    }

    .header-bottom.bg-black.stick {
        background-color: #181818;
    }

    .header-bottom.stick .row {
        height: 94px;
    }

    .header-bottom.stick .text-label {
        display: none;
    }

    .mobile-header.stick .row.align-items-center {
        display: none;
    }

    .mobile-header.stick .row.mt-sm-10 {
        margin: 0;
    }

    .header-bottom.stick .mainmenu nav>ul>li>a {
        line-height: 60px;
    }

    .mainmenu-area.stick .vm-dropdown {
        display: none;
    }

    /*----------------------------------------*/
    /*  3.2 Mainmenu CSS
/*----------------------------------------*/

    .mainmenu {
        position: relative;
    }

    .mainmenu.style-2 {
        padding-left: 18px;
    }

    .slider-top {
        border: 1px solid #ebebeb;
    }

    .mainmenu nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mainmenu nav ul li {
        display: inline-block;
    }

    .mainmenu nav ul li a {
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
        color: #4c4c4c;
        display: block;
        margin-right: 25px;
        position: relative;
    }

    .mainmenu nav ul li:last-child a {
        margin-right: 0;
    }

    .mainmenu nav ul li a:hover {
        color: #27aefd;
    }

    .mainmenu.style-2 nav ul li a {
        padding: 12px;
        margin-right: 0;
    }

    /*----------------------------------------*/
    /*  3.3 Submenu CSS
/*----------------------------------------*/

    .mainmenu nav ul li .submenu {
        display: block;
        visibility: hidden;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transition: all 0.2s ease-in-out 0s;
        -o-transition: all 0.2s ease-in-out 0s;
        transition: all 0.2s ease-in-out 0s;
        -webkit-transform: rotateX(-90deg);
        -ms-transform: rotateX(-90deg);
        -o-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        position: absolute;
        top: 100%;
        left: auto;
        background: #3ab5ff;
        min-width: 200px;
        border-top: 2px solid #2c466b;
        z-index: 99;
    }

    .mainmenu nav ul li .submenu li {
        display: block;
    }

    .text-label {
        font-size: 11px;
        padding: 0 5px;
        background: #5bc0de;
        color: #fff;
        position: absolute;
        left: 10px;
        top: -25px;
        line-height: 2;
        display: inline-block;
        text-transform: capitalize;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
    }

    .text-label:before {
        content: "";
        position: absolute;
        z-index: 9;
        top: 100%;
        left: 7px;
        border-width: 3px;
        border-style: solid;
        border-color: #5bc0de transparent transparent #5bc0de;
    }

    .text-label.label-hot {
        background: #254670;
    }

    .text-label.label-hot:before {
        border-color: #254670 transparent transparent #254670;
    }

    .caret {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 4px solid;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }

    .mainmenu nav ul li .submenu {
        padding: 5px 0;
        text-align: left;
    }

    .mainmenu nav ul li .submenu li a,
    .mainmenu nav ul li .megamenu-single ul li a {
        background: 0 0;
        position: relative;
        font-size: 14px;
        color: #fff;
        padding: 5px 30px;
        width: 100%;
        display: inline-block;
        -webkit-transition: all 0.2s ease-in-out 0s;
        -o-transition: all 0.2s ease-in-out 0s;
        transition: all 0.2s ease-in-out 0s;
        text-transform: unset;
        font-weight: normal;
    }

    .mainmenu nav ul li .submenu li a:hover,
    .mainmenu nav ul li .megamenu-single ul li a:hover {
        background: #333041;
        color: #fff;
    }

    .mainmenu nav ul li:hover .submenu,
    .mainmenu nav ul li:hover .mega-menu {
        height: auto;
        overflow-y: scroll;
        visibility: visible;
        opacity: 0.9;
        filter: alpha(opacity=100);
        -webkit-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        -o-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    /*----------------------------------------*/
    /*  3.4 Megamenu CSS
/*----------------------------------------*/

    .mega-menu {
        background-color: #292636;
        border-top: 2px solid #e23e1d;
        text-align: left;
        z-index: 999;
        box-shadow: 0px 36px 76px 0px rgba(0, 0, 0, 0.08);
        display: table;
        visibility: hidden;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transition: all 0.2s ease-in-out 0s;
        -o-transition: all 0.2s ease-in-out 0s;
        transition: all 0.2s ease-in-out 0s;
        -webkit-transform: rotateX(-90deg);
        -ms-transform: rotateX(-90deg);
        -o-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        position: absolute;
        top: auto;
        left: 0;
    }

    .megamenu-single {
        display: table-cell !important;
        vertical-align: top;
        padding-bottom: 16px;
    }

    .mega-menu-title {
        font-weight: 400;
        margin: 25px 0 15px;
        font-size: 19px;
        color: #fff;
        padding: 0 30px;
        border: none;
        display: block;
    }

    .mainmenu nav ul li .megamenu-single ul li {
        display: block;
    }

    .mainmenu nav ul li .megamenu-single ul li:last-child {
        margin-bottom: 0;
    }

    .mainmenu nav ul li .megamenu-single ul li a i {
        margin-right: 15px;
    }

    .mobile-header {
        display: none;
    }

    /*----------------------------------------*/
    /*  3.5 Register Login CSS
/*----------------------------------------*/

    .register-login a {
        font-size: 14px;
        color: #4c4c4c;
    }

    .register-login a:hover {
        color: #e23e1d;
    }

    .register-login.style-2 a {
        font-size: 12px;
        line-height: 40px;
    }

    .register-login span {
        display: inline-block;
        margin: 0 3px;
    }

    /*----------------------------------------*/
    /*  4. Products Search
/*----------------------------------------*/

    .collapse-menu {
        margin-top: -43px;
    }

    .collapse-menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .collapse-menu>ul>li {
        position: relative;
    }

    .collapse-menu>ul>li>a {
        background-color: #254670;
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
        display: block;
        text-transform: uppercase;
        padding: 15px 20px;
        position: relative;
        z-index: 9;
    }

    .collapse-menu.style-2>ul>li>a {
        padding: 13px 20px;
    }

    .collapse-menu>ul>li>a i {
        margin-right: 15px;
    }

    .collapse-menu.style-2>ul>li>ul {
        max-height: unset;
        height: auto;
    }

    .collapse-menu>ul>li>ul {
        background-color: #ffffff;
        border: 1px solid #ebebeb;
        /* border-top: 0; */
        padding: 15px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 1400%;
        z-index: 999;
    }

    .collapse-menu>ul>li>ul>li {
        display: block;
        margin-bottom: 3.5px;
        padding: 5px 8px;
    }

    .collapse-menu.style-2>ul>li>ul>li {
        padding: 0 20px;
        margin-bottom: 12.8px;
    }

    .collapse-menu>ul>li>ul>li:last-child {
        margin-bottom: 0;
    }

    .collapse-menu ul li ul li a {
        font-size: 14px;
        color: #191919;
        display: block;
    }

    .collapse-menu.style-2 ul li ul li a {
        font-size: 14px;
    }

    .collapse-menu ul li ul li a:hover {
        color: #27aefd;
    }

    .collapse-menu ul li ul li a i {
        color: #4c4c4c;
        margin-right: 20px;
    }

    .collapse-menu ul li ul li a .caret {
        float: right;
        margin: 12px 0 0;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all 0.2s ease-in-out 0s;
        -o-transition: all 0.2s ease-in-out 0s;
        transition: all 0.2s ease-in-out 0s;
    }

    .collapse-menu ul li ul li:hover a .caret {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .collapse-menu ul li ul li {
        position: relative;
    }

    .collapse-menu ul li ul li ul.mega-menu {
        background-color: #ffffff;
        transform: rotateX(0deg);
        transform-origin: left;
        top: 0;
        left: 100%;
        visibility: hidden;
        padding: 30px;
        font-size: 14px;
        border-radius: 0;
        display: block;
        opacity: 0;
        filter: alpha(opacity=0);
        transition: all 0.2s ease-in-out 0s;
        border: none;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    }

    .collapse-menu ul li ul li:hover ul.mega-menu {
        visibility: visible;
        opacity: 1;
        filter: alpha(opacity=1);
    }

    .collapse-menu ul li ul li ul.mega-menu li a {
        color: #191919;
        font-size: 14px;
        white-space: nowrap;
    }

    .collapse-menu ul li ul li ul.mega-menu .mega-menu-title {
        color: #191919;
        margin: 0 0 15px 0;
        padding: 0;
        font-size: 16px;
        font-weight: 500;
        white-space: nowrap;
    }

    .collapse-menu ul li ul li ul.mega-menu .megamenu-single {
        padding-right: 50px;
    }

    .collapse-menu ul li ul li ul.mega-menu .megamenu-single ul li {
        margin-bottom: 8px;
    }

    .collapse-menu ul li ul li ul.mega-menu .megamenu-single ul li:last-child {
        margin-bottom: 0;
    }

    .collapse-menu ul li ul li ul.mega-menu .megamenu-single ul li a:hover {
        color: #27affe;
    }

    /*----------------------------------------*/
    /*  4.2 Search Box
/*----------------------------------------*/

    .search-box {}

    .search-box select,
    .search-box input,
    .search-box button {
        float: left;
        height: 40px;
        border: 1px solid #ebebeb;
    }

    .search-box.style-2 select,
    .search-box.style-2 input {
        border: 2px solid #ebebeb;
    }

    .search-box select {
        width: 25%;
        border-right: 0;
        padding-left: 15px;
    }

    .search-box.style-2 select {
        border-radius: 20px 0 0 20px;
        border-right: 0;
    }

    .search-box input {
        width: 60%;
        padding-left: 15px;
    }

    .search-box.style-2 input {
        border-right: 0;
    }

    .search-box button {
        border-radius: 0px 20px 18px 0px;
        background-color: #254670;
        width: 15%;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        border: 0;
        color: #ffffff;
        cursor: pointer;
        transition: 0.3s;
    }

    .search-box.style-2 button {
        border-radius: 0 20px 20px 0;
    }

    .search-box button:hover {
        background-color: #254670;
    }

    .search-box.style-3 {
        position: relative;
    }

    .search-box.style-3 input {
        background-color: #111111;
        border-radius: 50px;
        border: 0;
        width: 100%;
        font-size: 12px;
    }

    .search-box.style-3 button {
        background: transparent;
        position: absolute;
        right: 10px;
        top: 2px;
        width: auto;
    }

    .search-box.style-3 button i {
        color: #eeeae2;
    }

    .search-box.style-4 input {
        background-color: #f0f2f9;
    }

    .search-box.style-4 button i {
        color: #252525;
    }

    /*----------------------------------------*/
    /*  4.3 Mini Cart
/*----------------------------------------*/

    .mini-cart {}

    .mini-cart ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mini-cart ul li {
        display: inline-block;
        margin-right: 5px;
    }

    .mini-cart ul li:last-child {
        margin-right: 0;
    }

    .mini-cart.style-2 ul li {
        margin-right: 0;
    }

    .mini-cart ul li.order-track {
        margin-right: 60px;
    }

    .mini-cart ul li.order-track a {
        font-size: 14px;
        color: #4c4c4c;
        font-weight: normal;
    }

    .mini-cart ul li.order-track a i {
        margin-right: 15px;
        font-size: 16px;
    }

    .mini-cart>ul>li>a {
        color: #252525;
        font-size: 16px;
        font-weight: 500;
        position: relative;
        line-height: 42px;
    }

    .mini-cart ul li a:hover {
        color: #37b5ff;
    }

    .mini-cart ul li a i {
        font-size: 22px;
        margin-right: 20px;
    }

    .mini-cart ul li a span {
        background-color: #e23e1d;
        width: 16px;
        height: 16px;
        font-size: 11px;
        color: #ffffff;
        display: inline-block;
        border-radius: 100%;
        text-align: center;
        line-height: 16px;
        position: absolute;
        left: 16px;
        top: -8px;
    }

    .cart-dropdown {
        background-color: #fff;
        border: 1px solid #ebebeb;
        -webkit-box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
        width: 427px;
        position: absolute;
        top: 50px;
        right: 15px;
        z-index: 9999;
        padding: 30px !important;
        text-align: left;
        display: none;
    }

    .mini-cart ul li ul {
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 22px;
    }

    .cart-dropdown li {
        display: table;
        width: 100%;
        margin-bottom: 10px;
    }

    .cart-dropdown li div {
        display: table-cell;
        vertical-align: top;
    }

    .mini-cart-thumb img {
        width: 70px;
    }

    .mini-cart-heading {
        padding-left: 30px;
    }

    .mini-cart-heading span {
        font-size: 16px;
        color: #38b6ff;
        font-weight: 500;
    }

    .mini-cart-heading h5 {
        font-weight: normal;
    }

    .mini-cart-heading h5 a {
        color: #232530;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .mini-cart-heading h5 a:hover {
        color: #e23e1d;
    }

    .mini-cart-remove {
        padding-left: 15px;
        vertical-align: middle !important;
    }

    .mini-cart-remove button {
        background-color: transparent;
        border: 0;
        font-size: 15px;
        color: #2b3435;
        cursor: pointer;
    }

    .mini-cart-remove button:hover {
        color: #e23e1d;
    }

    .mini-cart-thumb {
        vertical-align: middle;
    }

    .cart-dropdown li img {
        border-radius: 20px;
        border: 1px solid #ebebeb;
        width: 120px;
        height: 70px;
        max-width: none;
    }

    .mini-cart-total h5 {
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: #636363;
        margin-top: 18px;
        margin-bottom: 0;
    }

    .minicart-total {
        margin-top: 27px;
    }

    .minicart-total span {
        font-size: 14px;
        text-transform: uppercase;
        color: #38b6ff;
        font-weight: 500;
    }

    .mini-cart-checkout {
        margin-top: 30px;
    }

    .mini-cart-checkout a {
        display: block;
        font-size: 12px;
        color: #ffffff;
        transition: 0.3s;
    }

    .mini-cart-checkout a:hover {
        color: #ffffff !important;
    }

    .mini-cart-checkout a.view-cart {
        background-color: #191919;
        border-color: #191919;
    }

    .mini-cart-checkout a.view-cart:hover {
        background-color: #38b6ff;
        border-color: #2b466b;
    }

    .mini-cart-checkout a.checkout {
        background-color: #e23e1d;
    }

    .mini-cart-checkout a.checkout:hover {
        background-color: #b53217;
        border-color: #b53217;
    }

    /*----------------------------------------*/
    /*  5. Slider Area
/*----------------------------------------*/

    .slider-single {
        position: relative;
        background-size: cover;
        background-position: center center;
        height: 523px;
    }

    .slick-slide:focus {
        outline: 0 !important;
    }

    .slider-caption {
        padding: 0 50px;
        display: table-cell;
        vertical-align: middle;
    }

    .slider-caption h4 {
        animation-duration: 1s;
        animation-fill-mode: both;
        font-size: 14px;
        font-weight: 500;
        color: #e23e1d;
        text-transform: uppercase;
        margin-bottom: 17px;
    }

    .slick-current .slider-caption h4 {
        animation-name: fadeInBottom;
        animation-delay: 0.4s;
        animation-duration: 0.5s;
    }

    .slider-caption h2 {
        font-size: 60px;
    }

    .slider-caption {
        font-size: 14px;
        color: #254670;
    }

    .slider-caption p {
        animation-duration: 1s;
        animation-fill-mode: both;
    }

    .slick-current .slider-caption p {
        animation-name: fadeInBottom;
        animation-delay: 1.2s;
        animation-duration: 0.5s;
    }

    .slider-product-price {
        animation-duration: 1s;
        animation-fill-mode: both;
    }

    .slick-current .slider-product-price {
        animation-name: fadeInBottom;
        animation-delay: 1.4s;
        animation-duration: 0.5s;
    }

    .slider-product-price del {
        font-size: 16px;
        color: #4c4c4c;
    }

    .slider-product-price span {
        font-size: 24px;
        font-weight: 500;
        color: #e23e1d;
        display: inline-block;
        margin-left: 8px;
    }

    .slider-caption .btn-common {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .slick-current .slider-caption .btn-common {
        -webkit-animation-name: fadeInBottom;
        animation-name: fadeInBottom;
        -webkit-animation-delay: 1.5s;
        animation-delay: 1.5s;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
    }

    .main-slider .slider-single {
        border-radius: 15px;
    }

    .main-slider.slick-slider .slick-dots {
        position: absolute;
        bottom: 10px;
        margin: 0;
        z-index: 1;
    }

    .main-slider.slick-dotted.slick-slider {
        margin: 0;
    }

    .main-slider.slick-slider .slick-dots li button {
        width: 10px;
        height: 10px;
    }

    .main-slider.slick-slider .slick-dots li.slick-active button {
        width: 10px;
        height: 10px;
    }

    .slick-slider .slick-arrow {
        background: #f0f2f9;
        width: 26px;
        height: 26px;
        padding: 0;
        line-height: 26px;
        display: inline-block;
        text-align: center;
        font-size: 16px;
        color: #191919;
        transition: all 0.2s ease-in-out 0s;
        position: absolute;
        top: -83px;
        right: 15px;
        z-index: 9;
        border: none;
        box-shadow: none;
        cursor: pointer;
    }

    .cv-visible.slick-slider .slick-arrow {
        top: -35px;
    }

    .slick-slider .fa.fa-angle-left.slick-arrow {
        right: 45px;
    }

    .slick-slider .slick-arrow:hover {
        background-color: #23446e;
        color: #ffffff;
    }

    .slick-slider .slick-dots {
        margin-top: -80px;
        position: relative;
        bottom: unset;
        z-index: 1;
        pointer-events: none;
    }

    .slick-slider .slick-dots li {
        display: inline-block;
        margin: 0 5px;
        width: auto;
        height: auto;
    }

    .slick-slider .slick-dots li button {
        font-size: inherit;
        border: none;
        display: block;
        text-indent: -9999em;
        width: 8px;
        height: 8px;
        padding: 0;
        background: #e1e1e1;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        -webkit-transition: all 0.2s ease-in-out 0s;
        -o-transition: all 0.2s ease-in-out 0s;
        transition: all 0.2s ease-in-out 0s;
    }

    .slick-slider .slick-dots li.slick-active button {
        background: #254670;
        width: 30px;
        height: 8px;
        border-radius: 50px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        -ms-border-radius: 50px;
        -o-border-radius: 50px;
    }

    .slick-slider .textnav {
        display: none;
    }

    .dots-none .slick-dots {
        display: none !important;
    }

    /*----------------------------------------*/
    /*  5.2 Slider BG
/*----------------------------------------*/
    /* .slider-single.bg-1 {
    background-image: url(assets/images/sliders/1.jpg);
}
.slider-single.bg-2 {
    background-image: url(assets/images/sliders/2.jpg);
} */

    .slider-single.bg-3 {
        background-image: url(assets/images/sliders/3.jpg);
        height: 515px;
    }

    .slider-single.bg-4 {
        background-image: url(assets/images/sliders/4.jpg);
        height: 515px;
    }

    .slider-single.bg-5 {
        background-image: url(assets/images/sliders/5.jpg);
        height: 630px;
    }

    .slider-single.bg-6 {
        background-image: url(assets/images/sliders/1.png);
        height: 700px;
    }

    .slider-single.bg-7 {
        background-image: url(assets/images/sliders/6.jpg);
        height: 630px;
    }

    /*----------------------------------------*/
    /*  5.2 Banner
/*----------------------------------------*/

    .why-choose-cards {
        /* border: 1px solid #cbcbcb; */
        border-radius: 25px;
        box-shadow: 0px 0px 7px 0px #a1a1a1;
    }

    .banner-sm,
    .banner-md {
        position: relative;
    }

    .banner-sm img {
        width: 100%;
    }

    .banner-info {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        padding: 15px;
    }

    .banner-info h4 {
        color: #e23e1d;
        font-size: 16px;
        font-weight: 500;
    }

    .banner-info p {
        font-size: 17px !important;
        line-height: 29px !important;
        font-weight: 600;
        font-family: "Poppins", sans-serif;
        color: #191919;
        text-align: justify;
    }

    .banner-info p br {
        line-height: 1;
    }

    .banner-info p strong {
        color: #252525;
        font-weight: 500;
    }

    .product-value span {
        font-size: 16px;
        color: #e23e1d;
        font-weight: 500;
    }

    .product-value del {
        font-size: 14px;
        color: #b7b7b7;
    }

    .banner-md img {
        width: 100%;
    }

    .banner-md .banner-info {
        padding: 27px 40px 26px 40px;
    }

    .banner-md .banner-info p {
        font-size: 28px;
        line-height: 40px;
    }

    .banner-square {
        position: relative;
        outline: 5px solid rgba(255, 255, 255, 0.3);
        outline-offset: -30px;
    }

    .banner-square.style-2 {
        outline: 0;
        outline-offset: -6px;
        transition: 0.3s;
        overflow: hidden;
    }

    .banner-square.style-2 img {
        opacity: 0.5;
    }

    .banner-square.style-2:hover {
        outline: 6px solid #fac451;
    }

    .banner-caption {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 90px;
        margin: auto;
        text-align: center;
        z-index: 99;
    }

    .banner-caption h2,
    .banner-caption h3 {
        color: #ffffff;
    }

    .banner-caption h2 {
        font-size: 60px;
        font-weight: 500;
    }

    .banner-caption h3 {
        font-size: 36px;
        font-weight: normal;
    }

    .banner-caption.style-2 h2 {
        font-size: 48px;
        font-weight: 300;
        line-height: 1;
    }

    .banner-caption.style-2 h2 strong {
        font-weight: 500;
    }

    .banner-caption.style-2 h3 strong {
        color: #fac451;
        font-weight: 500;
    }

    /*----------------------------------------*/
    /*  6. Products Area
/*----------------------------------------*/

    .cv-visible .slick-list {
        padding-bottom: 50px;
        z-index: 2;
    }

    .single-product-cat {
        /* height: 229px; */
        /* width: 145px; */
        width: max-content;
        background-color: #929fc92b;
        text-align: center;
        padding: 25px 20px;
        border-radius: 15px;
        box-shadow: 0px 0px 4px 0px grey;
    }

    .single-product-cat a {
        display: block;
        font-size: 11px;
        font-weight: bold;
    }

    .single-product-cat img {
        border-radius: 20px;
        /* max-height: 110px; */
        max-height: 170px;
        /* border-radius: 50%; */
        margin: auto;
        background: white;
    }

    .single-product-cat h4 {
        font-size: 16px;
        font-weight: normal;
        margin-top: 5px;
    }

    .single-product-cat h4 a {
        color: #4c4c4c;
    }

    /*----------------------------------------*/
    /*  6.2 Products Tab
/*----------------------------------------*/

    .product-nav-tabs {}

    .product-nav-tabs ul.nav-tabs {
        border-bottom: 1px solid #ebebeb;
        display: block;
    }

    .product-nav-tabs ul li {
        display: inline-block;
    }

    .product-nav-tabs ul li a {
        font-size: 18px;
        color: #4c4c4c;
        display: block;
        margin-right: 35px;
        padding: 10px 0;
    }

    .product-nav-tabs ul li:last-child a {
        margin-right: 0;
    }

    .product-nav-tabs ul li a.active {
        font-weight: 500;
        color: #191919;
        position: relative;
    }

    .product-nav-tabs ul li a.active::before {
        background-color: #1d3d67;
        height: 3px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        margin-bottom: -1px;
    }

    .product-nav-tabs.style-2 ul {
        border-bottom: 0;
    }

    .product-nav-tabs.style-2 ul li {}

    .product-nav-tabs.style-2 ul li a {
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
    }

    .product-nav-tabs.style-2 ul li a.active {
        color: #6fb70f;
    }

    .product-nav-tabs.style-2 ul li a.active::before {
        display: none;
    }

    .product-nav-tabs.style-3 ul li a {
        font-size: 16px;
    }

    .product-single {
        border-radius: 20px;
        border: 1px solid #ebebeb;
        padding: 15px 20px;
        margin-top: 30px;
        position: relative;
        -webkit-transition: all 0.2s ease-in-out 0s;
        -o-transition: all 0.2s ease-in-out 0s;
        transition: all 0.2s ease-in-out 0s;
    }

    .product-single:hover {
        border-radius: 20px 20px 20px 20px;
        -webkit-box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.18);
        box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.18);
    }

    .product-single.style-2 {
        min-height: auto;
    }

    .product-title {}

    .product-title small {
        font-size: 12px;
        margin-bottom: 8px;
        display: inline-block;
    }

    .product-title small a {
        color: #4c4c4c;
        text-transform: uppercase;
    }

    .product-title h4 {
        word-wrap: break-word;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    .product-title h4 a {
        color: #252525;
    }

    .product-title h4 a:hover {
        color: #e23e1d;
    }

    .product-thumb {
        position: relative;
    }

    .product-single .downsale {
        font-size: 12px;
        font-weight: 500;
        display: inline-block;
        position: absolute;
        margin: 5px;
        right: 0;
        top: 0;
        z-index: 9;
        padding: 0 10px;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        background: #254670;
        color: #fff;
    }

    .product-single .downsale:before {
        position: absolute;
        top: 100%;
        left: 5px;
        content: "";
        border-color: #254670 transparent transparent #254670;
        border-width: 3px;
        border-style: solid;
    }

    .product-quick-view {
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        width: 100%;
        margin: auto;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: all 0.2s ease-in-out 0s;
        -o-transition: all 0.2s ease-in-out 0s;
        transition: all 0.2s ease-in-out 0s;
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    .product-single:hover .product-quick-view {
        opacity: 1;
        filter: alpha(opacity=100);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    .product-quick-view a {
        display: block;
        background-color: #f1f3fa;
        border-color: #f1f3fa;
        color: #181818;
        font-size: 13px;
        font-weight: 500;
        padding: 10px 0;
        border-radius: 2px;
        text-align: center;
        text-transform: uppercase;
        border-radius: 3px;
    }

    .product-quick-view a:hover {
        background-color: rgba(204, 210, 234, 0.9);
        border-color: rgba(204, 210, 234, 0.9);
        color: #181818;
    }

    .product-price-rating {
        border-top: 1px solid #ebebeb;
        padding-top: 25px;
        overflow: hidden;
    }

    .product-price-rating span {
        font-size: 16px;
        font-weight: 500;
        color: #254670;
        margin-right: 5px;
    }

    .product-price-rating del {
        font-size: 14px;
        color: #b7b7b7;
    }

    .product-price-rating i {
        font-size: 13px;
        color: #fac451;
    }

    .product-price-rating .rating-quantity {
        font-size: 13px !important;
        color: #999591;
        font-weight: normal;
        font-style: normal;
        margin: 0;
    }

    .product-action {
        -webkit-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
        text-align: center;
        padding: 20px 15px;
        border-width: 0 1px 1px;
        border-color: #ebebeb;
        border-style: solid;
        opacity: 0;
        filter: alpha(opacity=0);
        visibility: hidden;
        position: absolute;
        left: -1px;
        top: 100%;
        z-index: 99;
        width: calc(100% + 2px);
        background: #fff;
        border-top: 1px solid #e8e8e8;
    }

    .product-action a {
        display: inline-block;
    }

    .product-action .product-compare,
    .product-action .product-wishlist {
        width: 40px;
        height: 40px;
        border: 2px solid #e5e5e5;
        border-radius: 20px;
        line-height: 40px;
        font-size: 14px;
    }

    /*=========12.20.20/U.P/66/BOY->=~1450=======*/

    .product-action .product-compare:hover,
    .product-action .product-wishlist:hover {
        background-color: #e23e1d;
        border-color: #e23e1d;
        color: #ffffff;
    }

    .product-action a.add-to-cart {
        background-color: #254670;
        font-size: 13px;
        text-transform: uppercase;
        height: 40px;
        width: 130px;
        color: #ffffff;
        text-align: center;
        line-height: 40px;
        font-weight: 500;
        border-radius: 20px;
        margin: 0 10px;
    }

    .product-action a.add-to-cart:hover {
        background-color: #27affd;
    }

    .product-single:hover .product-action {
        border-radius: 0px 0px 20px 20px;
        opacity: 1;
        filter: alpha(opacity=1);
        visibility: visible;
        -webkit-box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.18);
        box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.18);
    }

    .product-single.style-2:hover {
        border-radius: 20px;
        box-shadow: unset;
        border-color: #38b6fe;
    }

    .product-single.style-2 .product-price-rating {
        border-top: 0;
        padding: 0;
    }

    .product-single.wide-style {
        padding: 40px;
    }

    .product-single.wide-style:hover {
        border-radius: 20px;
        -webkit-box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.18);
        box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.18);
    }

    .product-single.wide-style .product-quick-view {
        opacity: 1;
        transform: translateY(0);
    }

    .product-action.stuck {
        opacity: 1;
        filter: alpha(opacity=1);
        visibility: visible;
        box-shadow: none !important;
        border: 0;
        position: unset;
        top: unset;
        left: unset;
        width: auto;
        padding: 0;
    }

    .product-action.stuck .product-price-rating {
        border: 0;
        padding: 0;
        margin-top: 17px;
    }

    .product-single.wide-style .product-title h4 {
        font-size: 24px;
        line-height: 30px;
    }

    .product-single.wide-style .product-title.style-2 h4 {
        font-size: 16px;
        line-height: 26px;
    }

    .product-action.stuck .product-price-rating span {
        font-size: 18px;
    }

    .product-action.stuck a.add-to-cart {
        font-size: 11px;
        width: 133px;
        display: block;
        background-color: transparent;
        border: 2px solid #e5e5e5;
        color: #4c4c4c;
        line-height: normal;
    }

    .product-action.stuck a.add-to-cart.compare {
        border-color: #e5e5e5;
        margin-top: 10px;
        color: #4c4c4c;
    }

    .product-action.stuck a.add-to-cart:hover {
        border-color: #38b6ff;
        color: #2c4669;
    }

    .product-action {}

    .product-action.stuck a {
        background-color: #f5f5f5;
        font-size: 14px;
        color: #4c4c4c;
        display: block;
        padding: 10px 0;
        text-align: center;
        margin-bottom: 25px;
    }

    .product-action.stuck a:hover {
        background-color: #38b6ff5e;
    }

    .product-action.stuck a i {
        font-size: 18px;
        margin-right: 15px;
    }

    .product-features {}

    .product-features ul {}

    .product-features ul li {
        position: relative;
        font-size: 14px;
        color: #b7b7b7;
        display: block;
        margin-bottom: 5px;
    }

    .product-features ul li::before {
        font-family: fontAwesome;
        content: "\f00c";
        color: #e23e1d;
        margin-right: 5px;
    }

    .product-desc {
        border-right: 1px solid #e8e8e8;
    }

    .product-single.wide-style .add-to-wishlist {
        color: #4c4c4c;
        font-size: 18px;
        position: absolute;
        right: 47px;
        top: 0;
    }

    .product-single.wide-style .product-price-rating {}

    .product-single.wide-style .product-price-rating del {}

    .product-single.wide-style .product-price-rating span {
        font-size: 24px;
    }

    .product-single.wide-style .product-stock {}

    .product-stock {
        margin: 0;
    }

    .product-stock p {}

    .product-stock p span {
        color: #51a042;
    }

    .product-text {
        margin-top: 20px;
    }

    .product-text p {
        margin: 0 0 4px 0;
    }

    .product-single.p-black {
        background-color: #111111;
        border-color: transparent;
    }

    .product-single.p-black:hover {
        border-color: #4e453a;
    }

    .product-single.p-black .product-thumb {
        text-align: center;
    }

    .product-single.p-black .product-thumb img {
        margin: auto;
    }

    .product-single.p-black .product-price-rating {
        border: 0;
    }

    .product-single.p-black .product-price-rating span {
        color: #eeeae2;
    }

    .product-single.p-black .product-action {
        background-color: #111111;
        border-color: #4e453a;
        border-top: 1px solid #272727;
    }

    .product-single.p-black .product-action .product-compare,
    .product-single.p-black .product-action .product-wishlist {
        border-color: #40351e;
        color: #cbae8a;
    }

    .product-single.p-black .product-action a.add-to-cart {
        color: #181818;
    }

    .products-list {}

    .products-list ul {}

    .products-list ul li {}

    .products-list ul li .product-single {
        margin-top: 0;
        border-bottom: 0;
        min-height: auto;
    }

    .products-list ul li:last-child .product-single {
        border: 1px solid #ebebeb;
    }

    .products-list ul li .product-single:hover {
        border-color: #ebebeb;
    }

    .store-supports-area.bg-black {
        background-color: #111111;
        padding-top: 18px;
        padding-bottom: 25px;
    }

    .store-supports ul li,
    .store-support {
        display: flex;
        /* flex-direction: row;
    gap: 12px; */
        justify-content: center;
        align-items: center;
        padding: 11px 16px;
        margin-bottom: 12px;
        border: 1px solid #dee2e6;
        border-radius: 12px;
        background: #ffffff;
        transition: all 0.35s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .store-supports ul li:hover {
        border-color: #0f3061;
        background: #f8fbff;
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(13, 110, 253, 0.15);
    }

    .store-supports ul li::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: #0c3064;
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.35s ease;
    }

    .store-supports ul li:hover::before {
        transform: scaleY(1);
    }

    .store-supports ul li i,
    .store-supports ul li svg {
        color: #0e3774;
        font-size: 1.2rem;
        transition: transform 0.3s ease;
    }

    .store-supports ul li:hover i,
    .store-supports ul li:hover svg {
        transform: scale(1.15) rotate(5deg);
    }

    .store-supports ul li h6,
    .store-supports ul li p,
    .store-supports ul li span {
        margin: 0;
        transition: color 0.3s ease;
    }

    .store-supports ul li:hover h6 {
        color: #0f346b;
    }

    .store-supports ul li:last-child {
        margin-bottom: 0;
    }

    .store-supports ul li .support-icon {
        -ms-flex: 0 0 25%;
        flex: 0 0 30%;
        max-width: 30%;
    }

    .store-supports ul li .support-text {
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

    .store-supports ul li .support-text p {
        font-size: 12px;
        line-height: 20px;
    }

    .support-text strong {
        font-size: 14px;
    }

    .store-supports ul li:last-child {
        border: 1px solid #ebebeb;
    }

    .store-supports ul li div {
        -webkit-box-flex: 0;
    }

    .support-icon {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .support-text {
        white-space: normal;
        word-break: break-word;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .support-text p {
        margin-bottom: 0;
    }

    .support-text strong {
        font-weight: 500;
        font-size: 16px;
        color: #191919;
    }

    .store-support.style-2 {
        border: 0;
    }

    .store-support.style-2 strong {
        font-size: 18px;
        color: #eeeae2;
    }

    .store-support.style-2 p {
        color: #999591;
    }

    .store-support.style-3 {
        border: 0;
        text-align: center;
    }

    .blog-carousel {
        border-radius: 20px;
        border: 1px solid #ebebeb;
        padding: 20px 20px 11px 20px;
    }

    .blog-carousel-desc {
        margin-top: 12px;
    }

    .blog-carousel-desc small {
        font-size: 13px;
        font-weight: bold;
        color: #b7b7b7;
        letter-spacing: 2px;
    }

    .blog-carousel-desc h4 {
        font-size: 16px;
        font-weight: normal;
        line-height: 25px;
        margin-top: 5px;
    }

    .blog-carousel-desc h4 a {
        color: #252525;
    }

    .blog-carousel-desc h4 a:hover {
        color: #e23e1d;
    }

    .blog-carousel-desc .readmore {
        font-size: 12px;
        font-weight: 500;
        color: #e23e1d;
        text-transform: uppercase;
        display: inline-block;
        margin-top: 5px;
        position: relative;
    }

    .blog-carousel-desc .readmore::after {
        position: absolute;
        top: 0;
        right: 0;
        font-family: FontAwesome;
        content: "\f101";
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
    }

    .blog-carousel-desc .readmore:hover::after {
        right: -12px;
        visibility: visible;
        opacity: 1;
    }

    /*----------------------------------------*/
    /*  7.  Sidebar
/*----------------------------------------*/

    .product-deal {
        border: 2px solid #e23e1d;
        border-radius: 3px;
        overflow: hidden;
    }

    .progress {
        background-color: #e8e8e8;
        border-radius: 3px;
        box-shadow: none;
        height: 5px;
        overflow: visible;
    }

    .progress-bar {
        background-color: #e23e1d;
        box-shadow: none;
        position: relative;
    }

    .product-availability {
        margin-top: 18px;
    }

    .product-availability .progress {
        margin-bottom: 8px;
    }

    .product-availability span {
        font-weight: 500;
    }

    .product-countdown .cdown {
        float: left;
        width: 23%;
        margin: 0 1%;
        text-align: center;
    }

    .product-countdown .cdown span {
        background-color: #f2f4fc;
    }

    .product-countdown span.time-count {
        color: #191919;
        display: block;
        font-size: 18px;
        font-weight: 500;
        padding: 5px;
    }

    .product-countdown .cdown p {
        margin-bottom: 0;
        font-size: 12px;
    }

    .product-countdown.style-2 {}

    .product-countdown.style-2 .cdown {
        border: 2px solid #6fb70f;
        border-radius: 10px;
        width: auto;
        float: none;
        display: inline-block;
        width: 60px;
        height: 80px;
        padding: 10px;
    }

    .product-countdown.style-2 .cdown span {
        background-color: transparent;
    }

    .product-countdown.style-2 span.time-count {
        font-size: 24px;
    }

    /*----------------------------------------*/
    /*  8.  Product Offer Area
/*----------------------------------------*/

    .product-offer-area {
        background-color: #f0f2f9;
    }

    .product-offer-area.bg-black {
        background-color: #111111;
    }

    .text-block.style-2 {
        font-size: 16px;
        color: #999591;
    }

    .text-block.style-2 h3 {
        font-size: 30px;
        font-weight: normal;
        color: #eeeae2;
        margin-bottom: 13px;
    }

    .text-block.style-2 h3 span {
        color: #fac451;
        font-weight: 500;
    }

    /*----------------------------------------*/
    /*  9.  Brands
/*----------------------------------------*/

    .brands-area {
        border: 1px solid #ebebeb;
        padding: 30px 0;
        text-align: center;
    }

    .brand-items {}

    .brand-item {
        padding: 0 10px;
        text-align: center;
        height: 70px;
        line-height: 70px;
    }

    .brand-item.slick-slide img {
        display: inline-block;
    }

    .slick-carousel .slick-slide {
        outline: none !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    /*----------------------------------------*/
    /*  10.  Shop Page
/*----------------------------------------*/

    .shop-area {
        border-top: 1px solid #ebebeb;
        padding-top: 40px;
    }

    /*----------------------------------------*/
    /*  11.  Bradcrumb
/*----------------------------------------*/

    .breadcrumbs {}

    .breadcrumbs ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .breadcrumbs ul li {
        font-size: 14px;
        display: inline-block;
        margin-right: 11px;
        color: #959595;
    }

    .breadcrumbs ul li a {
        color: #4c4c4c;
    }

    .breadcrumbs ul li a:hover {
        color: #e23e1d;
    }

    .breadcrumbs ul li a i {
        margin-left: 11px;
    }

    /*----------------------------------------*/
    /*  12.  Vertical Menu
/*----------------------------------------*/

    .vertical-menu {
        border: 1px solid #ebebeb;
        padding: 20px;
    }

    .vertical-menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .vertical-menu ul li {
        display: block;
        margin-bottom: 16px;
    }

    .vertical-menu ul li:last-child {
        margin-bottom: 0;
    }

    .vertical-menu ul li a {
        font-size: 14px;
        font-weight: normal;
        color: #191919;
        position: relative;
        padding-left: 15px;
    }

    .vertical-menu>ul>li>a::before {
        position: absolute;
        top: 0;
        left: 0;
        font-family: FontAwesome;
        content: "\f107";
        line-height: normal;
    }

    .vertical-menu ul li a:hover {
        color: #e23e1d;
    }

    .vertical-menu ul li ul {
        height: auto;
        overflow: hidden;
        transition: 0.3s;
    }

    .vertical-menu ul li ul li {}

    .vertical-menu ul li ul li a {}

    .vertical-menu ul li ul li a:hover {}

    .vertical-menu.style-2 {
        border: 0;
        border-left: 4px solid #2e2d2d;
    }

    .vertical-menu.style-2 ul li {
        position: relative;
        padding-left: 10px;
    }

    .vertical-menu.style-2 ul li::before {
        background-color: #e23e1d;
        width: 4px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -14px;
        content: "";
        transition: 0.3s;
        transform: scaleY(0);
    }

    .vertical-menu.style-2 ul li:hover::before {
        transform: scaleY(1);
    }

    .vertical-menu.style-2 ul li strong {
        color: #eeeae2;
        font-size: 16px;
        font-weight: 500;
    }

    .vertical-menu.style-2 ul li a {
        font-size: 16px;
        color: #eeeae2;
        padding-left: 0;
    }

    .vertical-menu.style-2 ul li a:hover {
        color: #e23e1d;
    }

    .vertical-menu.style-2 ul li a::before {
        display: none;
    }

    .price_filter .ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all {
        background: #eeeeee none repeat scroll 0 0;
        border: medium none;
        border-radius: 0;
        height: 3px;
        margin-bottom: 10px;
        margin-left: auto;
    }

    .price_filter .ui-slider-handle.ui-state-default.ui-corner-all {
        background: #e23e1d none repeat scroll 0 0;
        border: 0 none;
        border-radius: 100%;
        height: 10px;
        top: -4px;
        width: 10px;
    }

    .price_filter .ui-slider-range {
        background: #e23e1d;
        height: 3px;
    }

    .price_slider_amount {
        margin: 30px 0 25px 0;
    }

    .price_slider_amount input[type="text"] {
        border: 0 none;
        font-size: 20px;
        font-weight: normal;
        color: #252525;
    }

    .price_slider_amount>input[type="submit"] {
        height: 40px;
        width: 85px;
        float: left;
    }

    .price_slider_amount button {
        background-color: #e23e1d;
        font-size: 13px;
        color: #ffffff;
        text-transform: uppercase;
        border: 0;
        border-radius: 3px;
        width: 85px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        float: right;
        transition: 0.3s;
    }

    .price_slider_amount button:hover {
        background-color: #b53217;
    }

    .list-filter {}

    .list-filter ul {}

    .list-filter ul li {}

    .list-filter ul li input[type="checkbox"] {
        border: 1px solid #b3b7c8;
        background-color: #ffffff;
    }

    .list-filter ul li label {
        margin-left: 15px;
    }

    .products-sort {
        border: 1px solid #ecedee;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        margin-right: 16px;
    }

    .products-sort select {
        border: 0;
    }

    .products-sort select option {}

    .product-view-system {
        margin: 5px 70px 0 0;
    }

    .col-lg-4 .product-view-system {
        margin: 5px 45px 0 0;
    }

    .product-view-system ul {
        border-bottom: 0;
    }

    .product-view-system ul li {
        display: inline-block;
    }

    .product-view-system ul li a {
        height: 40px;
        margin-right: 30px;
        display: block;
        opacity: 0.8;
    }

    .product-view-system ul li:last-child a {
        margin-right: 0;
    }

    /*----------------------------------------*/
    /*  13.  Product Details
/*----------------------------------------*/

    .product-details {}

    .products-nav-tabs {
        border: 0;
    }

    .products-nav-tabs.horizontal {
        display: table;
        width: 100%;
    }

    .products-nav-tabs li {
        border: 1px solid #ebebeb;
        margin-bottom: 10px;
    }

    .products-nav-tabs.horizontal li {
        display: inline-block;
        width: 31.9%;
        margin: 0 10px 0 0;
    }

    .products-nav-tabs.horizontal li:last-child {
        margin: 0;
    }

    .products-nav-tabs.horizontal.quick-view li {
        border-radius: 20px;
        width: 31.2%;
    }

    .products-nav-tabs li:hover {
        border-color: #38b6ff;
    }

    .products-nav-tabs li a {
        display: block;
        text-align: center;
    }

    .products-nav-tabs li a.active {
        border-color: #e23e1d;
    }

    .product-details-thumb {
        border-radius: 20px;
        border: 1px solid #ebebeb;
        position: relative;
    }

    .product-details-thumb a {
        color: #4c4c4c;
        font-size: 14px;
        border: 2px solid #e5e5e5;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        display: inline-block;
        text-align: center;
        line-height: 39px;
        position: absolute;
        top: 8%;
        right: 12%;
    }

    .product-details-desc h2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 7px;
    }

    .product-details-desc>ul {
        margin: 0;
        padding: 0;
        color: #b7b7b7;
        padding-bottom: 30px;
    }

    .product-details-desc ul li {
        font-size: 14px;
        color: #4c4c4c;
        display: block;
        margin-bottom: 13px;
    }

    .product-quantity {}

    .product-quantity label,
    .product-quantity input {
        display: inline-block;
    }

    .product-quantity label {
        margin-right: 30px;
    }

    .product-quantity input[type="number"] {
        width: 100px;
        height: 40px;
        padding-left: 40px;
        border: 1px solid #ebebeb;
        border-radius: 5px;
    }

    .product-colors label {
        margin-right: 10px;
    }

    .product-colors ul {
        display: inline-block;
    }

    .product-colors ul li {
        font-size: 0;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background-color: #e54e5d;
        display: inline-block;
        margin: 0 15px;
        cursor: pointer;
    }

    .product-colors ul li:nth-child(2) {
        background-color: #252525;
    }

    .product-colors ul li:nth-child(3) {
        background-color: #60b3f3;
    }

    .product-colors ul li:last-child {
        margin-right: 0;
    }

    .product-meta {
        border-top: 1px solid #ebebeb;
        padding-top: 16px;
    }

    .product-meta ul {}

    .product-meta ul li {
        display: inline-block;
        color: #232530;
    }

    .product-meta ul li span {
        display: inline-block;
        margin: 0 5px;
        color: #b3b7c8;
    }

    .product-meta ul li a {}

    .product-review-nav {
        background-color: #eceff6;
        border: 0;
        display: table;
        width: 100%;
        text-align: center;
    }

    .product-review-nav li {
        display: table-cell;
    }

    .product-review-nav li a {
        font-size: 14px;
        font-weight: 500;
        color: #191919;
        padding: 15px 0;
        display: block;
    }

    .product-review-nav li a.active {
        background-color: #e23e1d;
        color: #ffffff;
    }

    .product-rating i {
        font-size: 13px;
        color: #fac451;
    }

    .product-rating span {
        font-size: 13px;
        color: #999591;
    }

    .specifications .price {
        color: #e23e1d;
    }

    .product-description {
        border-radius: 0px 0px 20px 20px;
        border: 1px solid #ebebeb;
        border-top: 0;
        padding: 12px 30px 30px 30px;
    }

    .product-description h2 {
        font-size: 30px;
        color: #4c4c4c;
    }

    .site-image {
        position: relative;
    }

    .site-image::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        content: "";
    }

    .site-image h3 {
        font-size: 24px;
        font-weight: 700;
        color: #ffffff;
        position: absolute;
        top: 50px;
        left: 50px;
    }

    .site-image a {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 30px;
        color: #ffffff;
        margin: auto;
        display: inline-block;
        bottom: 0;
        width: 60px;
        height: 60px;
        border: 2px solid #ffffff;
        border-radius: 100%;
        z-index: 999;
        line-height: 60px;
        text-align: center;
    }

    .site-image a:hover {
        color: #ffffff;
    }

    .blog-comments.product-comments {
        padding-top: 27px;
        border-bottom: 0;
    }

    .product-comments .comment-avatar {
        padding-right: 25px;
    }

    .product-comments .comment-desc {
        padding-left: 25px;
        border-left: 1px solid #e9e9e9;
    }

    .product-comments .comment-desc span {
        font-weight: 300;
        font-size: 14px;
        color: #b3b7c8;
    }

    .blog-comment-form.product-comment-form>h4 {
        position: relative;
    }

    .blog-comment-form.product-comment-form>h4::before {
        background-color: #e9e9ea;
        height: 1px;
        width: 86%;
        position: absolute;
        top: 15px;
        right: 0;
        content: "";
    }

    .product-rating.style-2 {
        margin: 27px 0;
    }

    .product-rating.style-2 span {
        color: #232530;
        font-size: 18px;
        font-weight: 500;
        margin-right: 14px;
    }

    .product-rating.style-2 i {
        font-size: 18px;
        color: #f5c136;
    }

    .blog-comment-form.product-comment-form textarea {
        height: 130px;
    }

    /*----------------------------------------*/
    /*  14. Shopping Cart
/*----------------------------------------*/

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .cart-steps {
        padding: 0 0 30px;
    }

    .cart-steps ul {
        padding: 0;
        list-style: none;
        margin: 0 auto;
        text-transform: uppercase;
        width: 100%;
    }

    .cart-steps li {
        font-size: 20px;
        font-weight: 500;
        color: #232530;
        line-height: 60px;
        overflow: hidden;
        position: relative;
        background: #fff;
    }

    .cart-steps li {
        position: relative;
        text-align: center;
        float: left;
        width: 33.33%;
    }

    .cart-steps li::before {
        content: "";
        z-index: 1;
        position: absolute;
        top: 0;
        left: -42px;
        border: 1px solid #ebebeb;
        width: 60px;
        height: 60px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        background: #fff;
    }

    .cart-steps li::after {
        position: absolute;
        content: "";
        border-width: 1px 0;
        border-style: solid;
        border-color: #ebebeb;
        width: calc(100% - 30px);
        height: 100%;
        z-index: 10;
        left: 0;
        top: 0;
    }

    .cart-steps li:first-child::after {
        border-width: 1px 0 1px 1px;
    }

    .cart-steps li.active {
        background: #e23e1d;
        color: #fff;
    }

    .cart-step li.active:after {
        border-color: #e23e1d;
    }

    .cart-steps li .inner {
        position: relative;
    }

    .cart-steps .step {
        z-index: 8;
        position: absolute;
        top: -1px;
        right: 70px;
        line-height: 60px;
        font-size: 48px;
        text-transform: uppercase;
        font-weight: 600;
        display: inline-block;
        text-align: center;
        color: #eae9ec;
    }

    .cart-steps li.active .step {
        opacity: 0.1;
        filter: alpha(opacity=10);
        color: #fff;
        text-align: left;
    }

    .cart-steps li.active::before {
        display: none;
    }

    .cart-steps li.active .inner:before {
        display: none;
    }

    .cart-steps .inner-step {
        position: relative;
        z-index: 9;
    }

    .cart-steps li .inner:before {
        content: "";
        z-index: 1;
        position: absolute;
        top: 0;
        right: 12px;
        border: 1px solid #ebebeb;
        border-width: 1px 1px 0 0;
        width: 60px;
        height: 60px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        background: #fff;
        z-index: 2;
    }

    .cart-steps li .inner:after {
        content: "";
        z-index: 1;
        position: absolute;
        top: 0;
        right: -30px;
        border-style: solid;
        border-color: #fff #fff #fff transparent;
        border-width: 30px;
        width: 60px;
        height: 60px;
        background: #fff;
    }

    .cart-table {
        width: 100%;
        border: 1px solid #ebebeb;
    }

    .cart-table thead {
        border-bottom: 1px solid #ebebeb;
    }

    .cart-table thead tr th {
        padding: 20px 0;
        color: #232530;
        font-weight: 500;
        font-size: 16px;
    }

    .cart-table thead tr th:first-child {
        padding-left: 70px;
    }

    .cart-table tbody {
        border-top: 0;
    }

    .cart-table tbody tr td {
        padding: 15px 30px;
        white-space: nowrap;
    }

    .cart-table tbody tr:first-child td,
    .cart-table tbody tr:last-child td {
        padding: 30px 30px;
    }

    .cart-product-thumb {}

    .cart-product-name {}

    .cart-product-name h5 {
        font-size: 14px;
        font-weight: normal;
    }

    .cart-product-name h5 a {
        color: #111111;
    }

    .cart-product-name h5 a:hover {
        color: #e23e1d;
    }

    .cart-product-price {
        font-weight: 500;
        font-size: 16px;
        color: #e23e1d;
    }

    .cart-quantity-changer {}

    .cart-quantity-changer input {
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        width: 100px;
        border: 0;
    }

    .qtybutton {
        position: relative;
        font-size: 0;
        cursor: pointer;
    }

    a.value-increase::before {
        font-family: FontAwesome;
        font-size: 16px;
        content: "\f055";
    }

    a.value-decrease::before {
        font-family: FontAwesome;
        font-size: 16px;
        content: "\f056";
    }

    .product-remove {
        text-align: center;
    }

    .product-remove a,
    .cart-table thead tr th i {
        font-size: 14px;
        color: #111111;
        border: 1px solid #e5e5e5;
        width: 30px;
        height: 30px;
        display: inline-block;
        text-align: center;
        line-height: 30px;
    }

    .cart-table thead tr th i {
        line-height: 27px;
    }

    .cart-update .btn-common {
        height: 40px;
        border-color: #232530;
        color: #ffffff;
        background-color: #232530;
        width: 225px;
    }

    .cart-update .btn-common:hover {
        background-color: #e23e1d;
        border-color: #e23e1d;
    }

    .cart-coupon input {
        border: 0;
        border-bottom: 1px solid #ebebeb;
        width: 49%;
        margin-right: 5%;
    }

    .cart-coupon .btn-common {
        border-color: #ebebeb;
        color: #232530;
    }

    .cart-coupon .btn-common:hover,
    .proceed-checkout .btn-common:hover,
    .shpping-tax .btn-common:hover {
        background-color: #e23e1d;
        border-color: #e23e1d;
        color: #ffffff;
    }

    .cart-total table tr td span {
        font-size: 16px;
        font-weight: 500;
        color: #e23e1d;
    }

    .proceed-checkout {
        margin-top: 20px;
        text-align: center;
    }

    .proceed-checkout a {
        color: #636363;
        font-size: 14px;
    }

    .proceed-checkout .btn-common {
        width: 100%;
        border-color: #ebebeb;
        color: #232530;
        margin-top: 30px;
    }

    .cart-box {
        text-align: center;
        border: 1px solid #ebebeb;
    }

    .cart-box-inner {
        padding: 20px;
    }

    .cart-box h5 {
        font-size: 16px;
        font-weight: 500;
        color: #232530;
        border-bottom: 1px solid #ebebeb;
        text-transform: uppercase;
        padding: 20px 0;
        margin: 0;
    }

    .cart-box select {
        border: 1px solid #ebebeb;
        width: 170px;
        height: 40px;
        text-align: center;
        padding: 0 15px;
    }

    .cart-box tr td {
        vertical-align: middle;
        padding: 10px 0;
        border: 0;
    }

    .cart-box tr td label {
        margin-bottom: 0;
    }

    .shpping-tax p {
        margin-top: 5px;
    }

    .shpping-tax .btn-common {
        width: 190px;
        border-color: #ebebeb;
        color: #232530;
    }

    /*----------------------------------------*/
    /*  15. Checkout
/*----------------------------------------*/

    .billing-form {}

    .billing-form form {
        border: 1px solid #ecedee;
        border-top: 0;
        padding: 30px 30px 0 30px;
    }

    .billing-form h4,
    .sidebar-checkout h4,
    .order-details h4 {
        background-color: #f7f7f7;
        font-family: "Poppins", sans-serif;
        text-align: center;
        font-size: 16px;
        color: #1e1e27;
        padding: 15px 0;
        margin-bottom: 0;
    }

    .billing-form .row {
        margin-bottom: 15px;
    }

    .billing-form label {
        padding: 10px 0;
    }

    .billing-form input,
    .billing-form select {
        width: 100%;
        border: 0;
        border-bottom: 1px solid #e5e5e5;
        padding: 10px 10px;
    }

    .cart-coupon.style-2 {
        padding: 30px 30px;
    }

    .cart-coupon.style-2 input {
        float: left;
        width: 54.7%;
    }

    .cart-coupon.style-2 button {
        float: none;
        font-size: 12px;
        min-width: 120px;
        max-width: 60px;
    }

    .sidebar-checkout {
        border: 1px solid #ecedee;
    }

    .order-details {
        border: 1px solid #ecedee;
    }

    .order-details-inner {
        padding: 0 30px 30px 30px;
    }

    .order-details table {
        width: 100%;
    }

    .order-details table tr {
        border-bottom: 1px solid #e5e5e5;
    }

    .order-details table tr th,
    .order-details table tr td strong {
        color: #1e1e27;
        text-transform: uppercase;
    }

    .order-details table tr td,
    .order-details table tr th {
        margin: 25px 0 0 0;
        padding-bottom: 5px;
        display: inline-block;
    }

    .order-details table tr td strong {
        text-align: right;
    }

    .order-details table tr td:nth-child(2),
    .order-details table tr th:nth-child(2) {
        float: right;
    }

    .single-payment-gateway {}

    .single-payment-gateway label {
        margin-left: 20px;
    }

    .payment-gateway-desc {
        border: 1px solid #ebebeb;
        padding: 20px;
        margin: 5px 0 20px 0;
    }

    .place-order .btn-common {
        font-size: 12px;
    }

    /*----------------------------------------*/
    /*  16.  Blog
/*----------------------------------------*/

    .single-blog {}

    .blog-thumb a {
        display: block;
    }

    .blog-thumb img {
        width: 100%;
    }

    .blog-desc h2 {
        font-size: 24px;
        line-height: 34px;
        margin: 5px 0 4px 0;
    }

    .blog-desc h2 a {
        color: #292636;
    }

    .blog-desc h2 a:hover {
        color: #b53217;
    }

    .blog-meta {
        margin-bottom: 17px;
    }

    .blog-meta ul {}

    .blog-meta ul li {
        display: inline-block;
        font-size: 14px;
        color: #b5aeba;
    }

    .blog-meta ul li span {
        display: inline-block;
        margin: 0 7px;
    }

    .blog-meta ul li a {
        color: #b5aeba;
    }

    .blog-desc .catlink {
        font-size: 14px;
        border-bottom: 1px solid #e1beb7;
    }

    .blog-desc .btn-common {
        min-width: 165px;
        background-color: #e23e1d;
        border-color: #e23e1d;
        color: #ffffff;
    }

    .blog-desc .btn-common:hover {
        background-color: #b53217;
        border-color: #b53217;
    }

    .blog-title {
        margin-bottom: 20px;
    }

    .blog-title h2 {
        font-size: 36px;
        font-weight: 700;
        line-height: 46px;
        color: #191919;
    }

    .blog-title h2 a {
        color: #191919;
    }

    .blog-title h2 a:hover {
        color: #b53217;
    }

    .single-blog.style-2 {
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 50px;
    }

    /*----------------------------------------*/
    /*  17.  Blog Details
/*----------------------------------------*/

    .blog-details blockquote {
        font-family: "Satisfy", cursive;
        font-size: 18px;
        font-style: italic;
        line-height: 30px;
        border-left: 3px solid #e23e1d;
        color: #161715;
        padding-left: 25px;
        margin: 30px 0 30px 0;
    }

    .tags-list a {
        background-color: #e7f0f9;
        display: inline-block;
        font-size: 12px;
        color: #625b66;
        font-weight: 500;
        text-transform: uppercase;
        padding: 5px 25px;
        margin-right: 3px;
    }

    .tags-list a:hover {
        background-color: #e23e1d;
        color: #ffffff;
    }

    .social-icons.style-5 span {
        font-size: 16px;
        color: #2d292f;
        margin-right: 35px;
    }

    .social-icons.style-5 a {
        font-size: 13px;
        color: #625b66;
    }

    .social-icons.style-5 a:hover {
        color: #38b6ff;
    }

    /*----------------------------------------*/
    /*  18.  Blog Comment
/*----------------------------------------*/

    .blog-comments {
        margin-top: 50px;
        padding-top: 42px;
        border-top: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;
    }

    .blog-comments h4 {
        font-size: 24px;
        font-weight: 700;
        color: #292f3b;
    }

    .blog-comments ul {
        margin-top: 33px;
    }

    .blog-comments>ul>li {
        overflow: hidden;
        padding-bottom: 40px;
    }

    .blog-comments ul li ul {
        margin-left: 120px;
        margin-top: 45px;
        display: block;
        overflow: hidden;
        float: left;
    }

    .comment-avatar {
        width: 8.2%;
        height: 70px;
        float: left;
    }

    .comment-avatar img {
        border-radius: 100%;
        width: 100%;
    }

    .comment-desc {
        float: left;
        width: 91.8%;
        padding-left: 50px;
    }

    .comment-desc small {
        font-size: 12px;
        color: #b2b6bb;
        letter-spacing: 2px;
    }

    .comment-desc h4 {
        font-size: 18px;
        font-weight: 500;
        color: #292f3b;
        margin-bottom: 4px;
    }

    .comment-reaction {}

    .comment-reaction a {
        font-size: 12px;
        color: #1e1e27;
        border: 1px solid #d2d2d4;
        margin-right: 10px;
        display: inline-block;
        width: 80px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }

    .comment-reaction a:hover {
        border-color: #e23e1d;
        background-color: #e23e1d;
        color: #ffffff;
    }

    /*----------------------------------------*/
    /*  19.  Blog Comment Form
/*----------------------------------------*/

    .blog-comment-form h4 {
        font-size: 24px;
        font-weight: 700;
        color: #292f3b;
    }

    .blog-comment-form input,
    .blog-comment-form textarea {
        width: 100%;
        border: 1px solid #e7e7e7;
        padding-left: 15px;
    }

    .blog-comment-form input {
        height: 50px;
    }

    .blog-comment-form textarea {
        height: 116px;
        resize: vertical;
    }

    .blog-comment-form .btn-common {
        background-color: #e23e1d;
        min-width: 180px;
        font-size: 12px;
        color: #ffffff;
        text-transform: uppercase;
        border: 0;
        transition: 0.3s;
    }

    .blog-comment-form .btn-common:hover {
        background-color: #b53217;
    }

    /*----------------------------------------*/
    /*  20. Shop Compare
/*----------------------------------------*/

    .compare-table {}

    .compare-table table {}

    .compare-table table tr {}

    .compare-table table tr td {
        padding: 20px;
        vertical-align: middle;
    }

    .compare-thumb {
        padding-top: 10px;
        padding-bottom: 33px;
    }

    .compare-thumb h5 {
        font-size: 16px;
        font-weight: normal;
        margin: 45px 0 0 0;
    }

    .compare-thumb h5 a {
        color: #232530;
    }

    .compare-table .product-price-rating {
        border: 0;
        padding: 0;
    }

    .compare-table table tr td span {
        color: #e23e1d;
        font-weight: 500;
    }

    .compare-action {}

    .compare-action a {
        border: 2px solid #e5e5e5;
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        text-align: center;
        display: inline-block;
        border-radius: 100%;
        color: #e23e1d;
        margin: 0 5px;
    }

    .compare-action a:hover {
        background-color: #e23e1d;
        border-color: #e23e1d;
        color: #ffffff;
    }

    /*----------------------------------------*/
    /*  21. Pagination
/*----------------------------------------*/

    .site-pagination ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-pagination ul li {
        display: inline-block;
        margin-right: 5px;
    }

    .site-pagination ul li a {
        color: #252525;
        display: block;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
        transition: 0.3s;
    }

    .site-pagination ul li a i {
        font-size: 18px;
        line-height: 40px;
    }

    .site-pagination ul li a.active {
        height: 40px;
        width: 40px;
        border: 1px solid #ebebeb;
        font-weight: 500;
    }

    .site-pagination ul li a.active:hover {
        background-color: #e23e1d;
        border-color: #e23e1d;
        color: #ffffff;
    }

    .site-pagination ul li a {}

    .site-pagination ul li:last-child a {
        margin: 0 0 0 20px;
    }

    /*----------------------------------------*/
    /*  22. About
/*----------------------------------------*/

    .page-banner-area {
        background-image: url("assets/images/banners/1.jpg");
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #f8fafb;
    }

    .page-banner-text {
        font-size: 18px;
        color: #000000;
        line-height: 30px;
        text-align: center;
    }

    .page-banner-text h2 {
        font-size: 36px;
        font-weight: 700;
        color: #000000;
    }

    /*----------------------------------------*/
    /*  23. Contact
/*----------------------------------------*/

    .customer-supporter h1 {
        font-size: 48px;
        font-weight: 700;
    }

    .single-supporter img {
        width: 100%;
    }

    .single-supporter h3 {
        font-size: 24px;
        margin-bottom: 13px;
    }

    .single-supporter p {
        margin-bottom: 6px;
    }

    .contact-form input,
    .contact-form textarea {
        width: 100%;
        height: 40px;
        border: 1px solid #ebebeb;
        border-radius: 2px;
        padding: 0 15px;
    }

    .contact-form textarea {
        min-height: 240px;
        resize: vertical;
        padding: 15px;
    }

    .contact-form .btn-common {
        background-color: #e23e1d;
        display: inherit;
        width: 100%;
        border-radius: 2px;
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 1px;
        font-weight: normal;
        transition: 0.3s;
    }

    .contact-form .btn-common:hover {
        background-color: #b53217;
        border-color: #b53217;
    }

    /*----------------------------------------*/
    /*  24. FAQ
/*----------------------------------------*/

    .single-faq {
        margin-bottom: 20px;
        border-radius: 0;
        background-color: #f7f7f7;
        border: 1px solid #e9e9e9;
        padding: 0 30px;
    }

    .faq-heading {
        background-color: transparent;
        border-bottom: 0;
        padding: 0;
    }

    .faq-heading h5 {
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        font-weight: 700;
    }

    .faq-heading h5 a {
        color: #111111;
        font-weight: 600;
        padding: 15px 0 13px 0;
        display: block;
        text-align: left;
        border-bottom: 1px solid #e9e9e9;
        white-space: unset;
    }

    .faq-heading h5 a i {
        color: #38b6ff;
    }

    .faq-heading h5 a[aria-expanded="true"] .fa.fa-plus-circle,
    .faq-heading h5 a[aria-expanded="true"] .fa.fa-plus {
        display: none;
    }

    .faq-heading h5 a[aria-expanded="false"] .fa.fa-minus-circle,
    .faq-heading h5 a[aria-expanded="false"] .fa.fa-minus {
        display: none;
    }

    .faq-heading h5 a[aria-expanded="false"] {
        border-bottom: 0;
    }

    .faq-heading h5 a:hover,
    .faq-heading h5 a:focus {
        text-decoration: none;
        color: #111111;
        border-bottom-color: #e9e9e9;
    }

    .single-faq .card-body {
        padding: 25px 0 10px 0;
    }

    .faq-section {
        background-color: #f7f7f7;
        border: 1px solid #ebebeb;
        padding: 40px 30px 25px 30px;
    }

    .single-faq.style-2 {
        padding: 0;
        border: 0;
        margin-bottom: 0;
    }

    .single-faq.style-2 .faq-heading h5 a {
        border-bottom: 0;
    }

    .single-faq.style-2 .faq-heading h5 a i {
        background-color: #8bc052;
        width: 30px;
        height: 30px;
        color: #111111;
        line-height: 30px;
        text-align: center;
        margin-right: 15px;
    }

    .single-faq.style-2 .card-body {
        padding-top: 0;
        padding-bottom: 0;
    }

    /*----------------------------------------*/
    /*  25. Office Address
/*----------------------------------------*/

    .office-address {
        text-align: center;
        font-size: 14px;
        line-height: 26px;
        color: #646a7c;
    }

    .office-address h3 {
        font-size: 24px;
        font-weight: 500;
        color: #232530;
    }

    .office-address p {
        margin: 0;
    }

    /*----------------------------------------*/
    /*  26. 404 Message
/*----------------------------------------*/

    .error-msg {
        font-size: 16px;
        color: #4c4c4c;
    }

    .error-msg p {
        margin-bottom: 0;
    }

    .error-msg img {
        margin-bottom: 70px;
    }

    .error-msg h1 {
        font-size: 45px;
        font-weight: 700;
        color: #191919;
    }

    .error-msg .btn-common {
        background-color: #181616;
        border-color: #181616;
        border-radius: 0;
        font-weight: 500;
        min-width: 220px;
        color: #ffffff;
        letter-spacing: 2px;
    }

    .error-msg .btn-common:hover {
        background-color: #e23e1d;
        border-color: #e23e1d;
    }

    /*----------------------------------------*/
    /*  27. Coming Soon
/*----------------------------------------*/

    .coming-soon-area {
        background-image: url(assets/images/bg/3.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .coming-soon-msg h1 {
        font-size: 48px;
        font-weight: 700;
        color: #e23e1d;
    }

    .coming-soon-msg p {
        font-size: 14px;
        color: #191919;
        letter-spacing: 6px;
        text-transform: uppercase;
    }

    .coming-countdown.style-2 {
        border-bottom: 2px solid #42435d;
        overflow: hidden;
        padding: 80px 0 15px 0;
    }

    .coming-countdown .cdown {
        float: left;
        width: 25%;
    }

    .coming-countdown span.time-count {
        color: #e23e1d;
        display: inline-block;
        font-size: 48px;
        font-weight: 700;
    }

    .coming-countdown .cdown p {}

    .social-icons.style-2 strong {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: normal;
        text-transform: normal;
    }

    .social-icons.style-6 a {
        font-size: 14px;
    }

    /*----------------------------------------*/
    /*  28. Hover Effect
/*----------------------------------------*/

    .hover-effect::before,
    .hover-effect::after {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        -webkit-transition: transform 0.5s, opacity 0.2s ease-in-out 0s;
        -o-transition: transform 0.5s, opacity 0.2s ease-in-out 0s;
        transition: transform 0.5s, opacity 0.2s ease-in-out 0s;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .hover-effect:hover::before {
        -webkit-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
        -o-transform: scale(0, 1);
        transform: scale(0, 1);
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .hover-effect:hover::after {
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
        opacity: 1;
        filter: alpha(opacity=100);
    }

    /*----------------------------------------*/
    /*  29.  Footer
/*----------------------------------------*/

    .footer-area {
        background-color: #f0f2f9;
        padding: 60px 0 50px 0;
    }

    .company-detais-info {
        padding-bottom: 17px;
    }

    .company-detais-info img {
        margin-bottom: 30px;
    }

    .company-detais-info p {
        margin: 0 0 5px 0;
    }

    .copyright {
        border-top: 1px solid #e3e4e8;
        padding-top: 25px;
    }

    .copyright p {
        margin-bottom: 10px;
    }

    .copyright.style-2 {
        padding-top: 0;
        border: 0;
    }

    .copyright.style-2 p {
        margin-bottom: 0;
    }

    .copyright.style-2 p a {
        font-weight: 500;
    }

    .payment-gateways img {
        display: inline-block;
        margin-right: 14px;
    }

    .payment-gateways img:last-child {
        margin-right: 0;
    }

    .fooer-widget h4 {
        margin-bottom: 22px;
    }

    .fooer-widget.style-2 h4 {
        font-size: 16px;
        color: #eeeae2;
    }

    .footer-menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .footer-menu ul li {
        gap: 5px;
        display: flex;
        /* display: block; */
    }

    .footer-menu ul li a {
        color: #000000;
        display: inline-block;
        margin-bottom: 8px;
    }

    .footer-menu ul li:last-child a {
        margin-bottom: 0;
    }

    .footer-menu ul li a:hover {
        color: #03225c;
    }

    .fooer-widget.style-2 ul li a {
        color: #999591;
    }

    .fooer-widget.style-2 ul li a:hover {
        color: #fac451;
    }

    .footer-bg-situational-layout {
        position: relative;
        background: url(footer-bg/piping-center-footer-bg-img-d.jpg) no-repeat center center/cover;
        z-index: 1;
        overflow: hidden;
    }

    /* Overlay */

    .footer-bg-situational-layout::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(159, 159, 159, 0.359);
        z-index: -1;
    }

    .footer-bg-situational-layout {
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 120px 20px;
    }

    @media (max-width: 768px) {
        .footer-bg-situational-layout {
            padding: 30px 15px;
            min-height: 250px;
        }
    }

    .subscribe-form {}

    .subscribe-form h3 {
        font-weight: 300;
        font-size: 29px;
        color: #252525;
    }

    .subscribe-form h3 strong {
        font-weight: 500;
    }

    .subscribe-form p {
        margin-bottom: 20px;
    }

    .subscribe-form input {
        background-color: #dbdde3;
        border: 0;
        height: 40px;
        padding-left: 15px;
        border-radius: 20px 0px 0px 20px;
        float: left;
        width: 65%;
    }

    .subscribe-form.style-3 input {
        background-color: #313131;
        color: #ffffff;
    }

    .subscribe-form button {
        background-color: #e23e1d;
        font-size: 13px;
        font-weight: 500;
        height: 40px;
        text-transform: uppercase;
        color: #ffffff;
        border: 0;
        border-radius: 0px 20px 20px 0px;
        width: 35%;
        cursor: pointer;
        transition: 0.3s;
    }

    .subscribe-form button:hover {
        background-color: #b53217;
    }

    .subscribe-form.style-2 input {
        background-color: #181818;
        color: #999591;
    }

    .subscribe-form.style-2 button {
        color: #181818;
    }

    .social-icons.style-2 {
        margin-top: 35px;
    }

    .social-icons.style-2 strong {
        color: #191919;
        font-size: 14px;
        text-transform: uppercase;
        margin-right: 20px;
    }

    .social-icons.style-2 a {
        font-size: 16px;
        color: #191919;
        border: 1px solid #d7d7d7;
        border-radius: 20px;
        width: 37px;
        height: 37px;
        line-height: 35px;
        text-align: center;
        margin-right: 5px;
    }

    .social-icons.style-2 a:last-child {
        margin-right: 0;
    }

    .social-icons.style-2 a:hover {
        background-color: #37b7fe;
        border-color: #2b456a;
        color: #ffffff;
    }

    .social-icons.style-2 a i {
        color: #ffffff !important;
    }

    .social-icons.style-2 a:hover i {
        color: #fff !important;
    }

    .social-icons.style-4 {
        margin-top: 3px;
        padding-top: 30px;
        border-top: 1px solid #d7d7d7;
    }

    .subscribe-text {
        color: #b7b7b7;
    }

    .subscribe-text p {
        margin: 0;
    }

    .subscribe-text h3 {
        color: #ffffff;
        font-weight: 300;
        margin-bottom: 0;
    }

    .subscribe-text h3 strong {
        font-weight: 500;
    }

    /*----------------------------------------*/
    /*  30.  Subscribe Area
/*----------------------------------------*/

    .subscribe-area {
        background-color: #1a1a1a;
    }

    /*----------------------------------------*/
    /*  31.  Copyright Area
/*----------------------------------------*/

    .copyright-area {
        background-color: #f0f2f9;
    }

    /*----------------------------------------*/
    /*  32.  Etc
/*----------------------------------------*/

    .modal {
        z-index: 9999;
    }

    .modal-backdrop {}

    .modal.show .modal-dialog {
        max-width: 1070px;
    }

    .modal-content {
        border-radius: 20px;
        border: 0;
        box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.18);
    }

    .cv-visible.slick-dotted.slick-slider {}

    .recent-products.slick-slider .slick-arrow {
        top: -54px;
    }

    /* tab customization */

    .tab-content .tab-pane {
        display: block;
        height: 0;
        max-width: 100%;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
    }

    .tab-content .tab-pane.active {
        height: auto;
        opacity: 1;
        overflow: visible;
        visibility: visible;
    }

    table td {
        border: 1px solid #c3c3c3;
        text-align: center;
        color: black;
        padding: 4px;
        background-color: #fff;
    }

    td {
        display: table-cell;
        vertical-align: inherit;
        unicode-bidi: isolate;
    }

    table tr:first-child td {
        padding: 5px;
        background: #38b6ff;
        border: 1px solid #c3c3c3;
        color: white;
        font-weight: 800;
    }

    table {
        border-bottom: 2px solid #2c466b;
        text-align: center;
        background-color: #fff;
        width: 100%;
        border-spacing: 0px;
        width: 100%;
        margin-bottom: 15px;
        border-collapse: collapse;
        border-spacing: 0;
        border-radius: 5px;
    }

    img.product-img {
        border-radius: 20px;
        width: 645px;
        height: 467px;
        object-fit: cover;
        object-position: center;
    }

    img.product-img-sm {
        max-width: 200px;
        height: 120px;
        object-fit: cover;
        object-position: center;
        border-radius: 20px;
    }

    ul.nav.nav-tabs.products-nav-tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .product-description h2 {
        font-size: 30px;
        line-height: 30px;
        color: #4c4c4c;
    }

    .contact-form-container {
        background: #fff;
        padding: 20px;
        max-width: 500px;
        margin: 0 auto;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }

    /* Title */

    .form-title {
        text-align: center;
        margin-bottom: 15px;
        font-size: 24px;
        color: #333;
    }

    /* Input Group */

    .input-group {
        position: relative;
        margin-bottom: 20px;
    }

    /* Input and Textarea */

    .input-group input,
    .input-group textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        outline: none;
        transition: all 0.3s ease;
        background: transparent;
        position: relative;
    }

    /* Floating Labels */

    .floating-label,
    .floating-label-message {
        position: absolute;
        top: 50%;
        left: 12px;
        font-size: 16px;
        color: #888;
        pointer-events: none;
        transition: all 0.3s ease;
        transform: translateY(-50%);
        background: white;
        /* Ensures label is visible */
        padding: 0 5px;
        /* Adds spacing around text */
        z-index: 2;
        /* Keeps label above input field */
    }

    /* Move label above when input is focused or has content */

    .input-group input:focus~.floating-label,
    .input-group textarea:focus~.floating-label,
    .input-group input:not(:placeholder-shown)~.floating-label,
    .input-group textarea:not(:placeholder-shown)~.floating-label,
    .input-group input:valid~.floating-label,
    .input-group textarea:valid~.floating-label {
        top: -10px;
        font-size: 14px;
        color: #007bff;
        z-index: 3;
        /* Ensures label is always on top */
    }

    /* Special case for textarea */

    .input-group input:focus~.floating-label-message,
    .input-group textarea:focus~.floating-label-message,
    .input-group input:not(:placeholder-shown)~.floating-label-message,
    .input-group textarea:not(:placeholder-shown)~.floating-label-message,
    .input-group input:valid~.floating-label-message,
    .input-group textarea:valid~.floating-label-message {
        top: -10px;
        font-size: 14px;
        color: #007bff;
        z-index: 3;
    }

    /* File Upload */

    .file-upload-box {
        border: 2px dashed #007bff;
        padding: 15px;
        text-align: center;
        cursor: pointer;
        transition: 0.3s ease;
        border-radius: 5px;
        background-color: #f8f9fa;
        margin-bottom: 15px;
    }

    .file-upload-box:hover {
        background-color: #e9ecef;
    }

    .upload-link {
        color: #007bff;
        font-weight: bold;
        cursor: pointer;
    }

    /* Submit Button */

    .btn-primary {
        width: 100%;
        padding: 12px;
        background: #007bff;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        border-radius: 5px;
        transition: all 0.3s ease;
        position: relative;
    }

    .btn-primary:hover {
        background: #0056b3;
    }

    /* Loading Animation */

    .custom-loader {
        display: none;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #007bff;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        animation: spin 0.8s linear infinite;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* Ensure tab navigation remains visible */

    .product-tabs-container {
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
    }

    /* Scrollable tabs */

    .nav-tabs.product-review-nav {
        border-radius: 25px 25px 0 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: space-around;
        border-bottom: 2px solid #ddd;
    }

    /* Ensure tabs take up space on small screens */

    .nav-tabs.product-review-nav .nav-item {
        flex-shrink: 0;
    }

    /* Ensure first tab ("Description") is visible */

    .nav-tabs.product-review-nav .nav-item:first-child {
        margin-left: 10px;
    }

    /* Adjust padding and spacing on smaller screens */

    @media (max-width: 768px) {
        .nav-tabs.product-review-nav {
            flex-wrap: nowrap;
            overflow-x: auto;
            display: flex;
            gap: 10px;
            padding-bottom: 5px;
        }

        .nav-tabs.product-review-nav .nav-item {
            min-width: fit-content;
        }

        .nav-tabs.product-review-nav .nav-link {
            padding: 10px 15px;
            font-size: 14px;
            white-space: nowrap;
        }

        /* Ensure the tab content is readable on small screens */
        /* .tab-content {
        padding: 10px;
    } */
    }

    p#fileUploadText {
        text-align: center;
        margin-top: 16px;
    }

    ul.quick-view.mt-10 {
        display: flex;
        overflow-x: scroll;
    }

    ul.quick-view.mt-10 li a img {
        max-width: 95px;
        height: 67px;
        object-fit: cover;
    }

    img.thumb-img {
        width: 330px;
        height: 225px;
        object-fit: cover;
    }

    .mainmenu nav ul li .submenu {
        padding: 5px 0;
        z-index: 1000;
        text-align: left;
    }

    /* Social Media Icons Styling */

    .social-icons {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-direction: row-reverse;
    }

    .social-icons span {
        font-weight: bold;
        font-size: 16px;
        color: #333;
    }

    /* Common Button Styles */

    .social-icons a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-decoration: none;
        transition: all 0.3s ease-in-out;
        font-size: 18px;
    }

    /* Facebook */

    .social-icons a.btn-outline-primary {
        border: 2px solid #1877f2;
        color: #1877f2;
    }

    .social-icons a.btn-outline-primary:hover {
        background-color: #1877f2;
        color: #fff;
    }

    /* Twitter */

    .social-icons a.btn-outline-info {
        border: 2px solid #1da1f2;
        color: #1da1f2;
    }

    .social-icons a.btn-outline-info:hover {
        background-color: #1da1f2;
        color: #fff;
    }

    /* LinkedIn */

    .social-icons a.btn-outline-primary:nth-of-type(2) {
        border: 2px solid #0077b5;
        color: #0077b5;
    }

    .social-icons a.btn-outline-primary:nth-of-type(2):hover {
        background-color: #0077b5;
        color: #fff;
    }

    /* WhatsApp */

    .social-icons a.btn-outline-success {
        border: 2px solid #25d366;
        color: #25d366;
    }

    .social-icons a.btn-outline-success:hover {
        background-color: #25d366;
        color: #fff;
    }

    /* Instagram */

    .social-icons a.btn-outline-danger {
        border: 2px solid #e4405f;
        color: #e4405f;
    }

    .social-icons a.btn-outline-danger:hover {
        background-color: #e4405f;
        color: #fff;
    }

    /* Add box shadow for a floating effect */

    .social-icons a {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .social-icons a:hover {
        transform: scale(1.1);
    }

    img.latestProductsimg {
        width: 55px;
        height: 55px;
        object-fit: cover;
        object-position: center;
        border-radius: 12px;
    }

    .product-thumb-lattest a img {
        border-radius: 10px;
        width: 100%;
        height: 280px;
        object-fit: cover;
        object-position: center;
    }

    img.product-thumb-img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        object-position: center;
    }

    .product-nav-tabs.style-3 {
        margin-top: 19px;
        text-align: end;
        /* margin-left: 673px; */
        border-bottom: 1px solid #ebebeb;
    }

    label.form-label.fw-semibold {
        width: 312px;
        /* align-items: center; */
    }

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

    .slider {
        padding-block: 12px;
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;
        mask-image: linear-gradient(to right, transparent 20% 80%, #000, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, #000, transparent);
    }

    .list {
        display: flex;
        width: calc(var(--width) * var(--imageQuantity) * 2);
        /* Double the width for seamless looping */
        gap: calc(var(--width) / 4);
        animation: autoScroll 20s linear infinite;
    }

    .list:hover {
        animation-play-state: paused !important;
    }

    .item {
        width: var(--width);
        height: var(--height);
        flex-shrink: 0;
    }

    .item img {
        width: 100%;
        height: 100%;
        transition: filter 0.5s ease-in-out;
    }

    @keyframes autoScroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-1 * var(--width) * var(--imageQuantity)));
        }
    }

    .slider[reverse="true"] .list {
        animation: reverseScroll 20s linear infinite;
    }

    @keyframes reverseScroll {
        0% {
            transform: translateX(calc(-1 * var(--width) * var(--imageQuantity)));
        }

        100% {
            transform: translateX(0);
        }
    }

    .slider:hover .item img {
        filter: grayscale(1);
    }

    .slider .item:hover img {
        filter: grayscale(0);
    }

    .row.suppliercityNames {
        height: 238px;
    }

    /* Suppiercity Crousel */

    .sider-city-scroll {
        margin: auto;
        /* max-width: 1767px; */
        max-width: fit-content;
        overflow-x: scroll;
        white-space: nowrap;
        background-color: #fff;
        display: flex;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scroll-disabler {
        width: 100vw;
        height: 450px;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.0001);
    }

    ::-webkit-scrollbar {
        display: none;
    }

    article {
        min-width: 350px;
        height: 285px;
        padding: 1rem;
    }

    article .wrapper {
        padding: 1rem;
        background-color: #fff;
        /* height: 100%; */
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 25px;
    }

    article .img {
        height: 50%;
        background-color: lightgray;
        border-radius: 25px 25px 0 0;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
        /* optional */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3rem;
        font-weight: bold;
        color: #fff;
    }

    article .content>div {
        height: 2rem;
        background-color: lightgray;
        margin: 2rem auto 0 auto;
        width: 85%;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }

    article .content>div:last-child {
        height: 2rem;
    }

    /* Supplier City Crousel Names  */
    /* New logo slider  */

    @keyframes slides {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-100%);
        }
    }

    .logos {
        overflow: hidden;
        padding: 30px 0px;
        white-space: nowrap;
        position: relative;
    }

    .logos:before,
    .logos:after {
        position: absolute;
        top: 0;
        content: "";
        width: 250px;
        height: 100%;
        z-index: 2;
    }

    .logos:before {
        left: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255));
    }

    .logos:after {
        right: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
    }

    .logo_items {
        display: inline-block;
        animation: 35s slides infinite linear;
    }

    .logos:hover .logo_items {
        animation-play-state: paused;
    }

    .logo_items img {
        height: 100px;
    }

    .row.mt-40.whychooseus {
        margin-top: 17px;
        margin-bottom: 65px;
        justify-content: center;
    }

    /* .sidebar {
    margin-top: 865px;
} */

    .suppliercityNames {
        text-align: center;
    }

    img.specific-product_img {
        width: 110px;
        height: 110px;
        border-radius: 50%;
    }

    select#title-select {
        width: 60%;
    }

    .col-lg-2.mt-sm-30.suppliers {
        margin-top: 241px;
    }

    /* Search product  */

    .search-field-wrapper {
        width: 100%;
        max-width: 70%;
    }

    #search-input {
        width: 100%;
        padding: 10px 14px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        transition: border-color 0.3s ease;
    }

    #search-input:focus {
        border-color: #007bff;
        outline: none;
    }

    #results {
        padding: 0px 23px 0px 36px;
        position: absolute;
        top: 91%;
        left: 0;
        width: 410px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        max-height: 200px;
        overflow-y: auto;
        z-index: 10;
    }

    #results div {
        padding: 8px 12px;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s;
    }

    #results div:hover {
        background-color: #f7f7f7;
    }

    #results div:last-child {
        border-bottom: none;
    }

    #results li {
        padding: 10px;
        background: #f1f1f1;
        margin-bottom: 5px;
        transition: background 0.3s ease;
        border-radius: 5px;
        cursor: pointer;
    }

    #results li:hover {
        background: #dfe6e9;
    }

    #results li a {
        text-decoration: none;
        color: #2d3436;
        display: block;
        width: 100%;
        height: 100%;
    }

    #results li a:hover {
        color: #0984e3;
    }

    .search-input-side {
        margin-top: 20px;
    }

    .col-xl-3.col-lg-6.choseusbox {
        height: 0px;
    }

    img.WhyChooseUs-mainimg {
        border-radius: 34px;
        padding: 15px;
        height: 335px;
        width: 1470px;
    }

    /* Pagination css */

    .custom-pagination .pagination {
        gap: 6px;
        flex-wrap: wrap;
    }

    .custom-pagination .page-link {
        color: #007bff;
        font-weight: 500;
        border-radius: 50px;
        transition: 0.3s ease-in-out;
        padding: 8px 16px;
        border: 1px solid #dee2e6;
        background-color: #fff;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.06);
    }

    .custom-pagination .page-link:hover {
        background-color: #e9f5ff;
        color: #0056b3;
        transform: scale(1.05);
    }

    .custom-pagination .page-item.active .page-link {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }

    .custom-pagination .page-item.disabled .page-link {
        color: #ccc;
        pointer-events: none;
        background-color: #f8f9fa;
    }

    .pagination-summary {
        font-size: 14px;
        color: #6c757d;
    }

    h5.supplier_name {
        margin-left: 15px;
    }

    svg.lucide.lucide-badge-check {
        margin-top: 3px;
    }

    ul.supplier_product_detail {
        margin-top: 10px;
        margin-left: 0px;
    }

    img.avatar-xxl {
        width: -webkit-fill-available;
    }

    img.avatar-xxl {
        width: 100% !important;
    }

    .custom-accordion {
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden;
    }

    .accordion-item {
        border-top: 1px solid #ddd;
    }

    .accordion-header {
        background: #f5f5f5;
        padding: 10px 15px;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .accordion-body {
        display: none;
        padding: 10px 15px;
        background-color: #fff;
    }

    .accordion-header.active .arrow {
        transform: rotate(180deg);
    }

    .arrow {
        transition: transform 0.3s;
    }

    .custom-accordion-filters {
        border: 1px solid #ddd;
        border-radius: 20px;
        padding: 15px;
        background-color: #f9f9f9;
    }

    .filter-group {
        margin-bottom: 10px;
        border-bottom: 1px solid #ddd;
    }

    .filter-title {
        cursor: pointer;
        font-weight: bold;
        padding: 8px;
        background-color: #e8e8e8;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color 0.3s;
    }

    .filter-title:hover {
        background-color: #d8d8d8;
    }

    .filter-options {
        display: none;
        padding: 10px;
        padding-left: 20px;
    }

    .filter-options label {
        display: block;
        margin-bottom: 5px;
    }

    .apply-filter-btn {
        margin-top: 10px;
        padding: 8px 12px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        font-weight: bold;
    }

    .arrow {
        transform: rotate(0deg);
        transition: transform 0.3s;
    }

    .filter-title.active .arrow {
        transform: rotate(90deg);
    }

    .table-responsive.ip_table {
        height: 250px;
    }

    .ip-info.card.card-height {
        overflow-y: scroll;
        height: 800px;
    }

    .table-wrapper {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid #ddd;
    }

    table.ip-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    table.ip-table th,
    table.ip-table td {
        padding: 10px;
        border: 1px solid #ccc;
        text-align: left;
        white-space: nowrap;
    }

    table.ip-table thead th {
        position: sticky;
        top: 0;
        background-color: #fff;
        z-index: 10;
    }

    .views-details {
        max-height: 400px;
        overflow-y: auto;
    }

    .views-details thead th {
        position: sticky;
        top: 0;
        background-color: #f8f9fa;
        /* Same as table head bg */
        z-index: 5;
    }

    .views-details td,
    .views-details th {
        white-space: nowrap;
    }

    /*
Floting Button */

    .contact-heading {
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 30px;
        color: #004d99;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
        animation: fadeIn 2s ease;
    }

    /* Container with gradient and float-in */

    .animated-contact {
        background: linear-gradient(145deg, #ffffff, #e3f2fd);
        border-radius: 20px;
        padding: 35px 25px;
        max-width: 450px;
        margin: auto;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
        animation: floatUp 1.2s ease forwards;
        opacity: 0;
        transform: translateY(40px);
    }

    /* Individual items */

    .contact-item {
        display: flex;
        align-items: center;
        margin-bottom: 28px;
        padding: 18px;
        background: #ffffff;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        position: relative;
        transition: all 0.4s ease;
        animation: zoomFadeIn 0.9s ease both;
    }

    .contact-item:hover {
        background: #e6f7ff;
        transform: translateX(10px) scale(1.03);
        box-shadow: 0 10px 25px rgba(0, 123, 255, 0.2);
    }

    /* Icon glow and animation */

    .icon {
        font-size: 24px;
        margin-right: 9px;
        color: #007bff;
        animation: iconBounce 3s ease-in-out infinite;
        transition: transform 0.3s ease;
    }

    .contact-item:hover .icon {
        transform: scale(1.2) rotate(8deg);
    }

    .glowing {
        text-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
    }

    .text-box {
        z-index: 2;
    }

    .label {
        font-size: 13px;
        text-transform: uppercase;
        font-weight: bold;
        color: #555;
        letter-spacing: 1px;
    }

    .value {
        font-size: 14px;
        color: #222;
        font-weight: 500;
    }

    /* Animation keyframes */

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes floatUp {
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes zoomFadeIn {
        0% {
            opacity: 0;
            transform: scale(0.9) translateY(30px);
        }

        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    @keyframes iconBounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-5px);
        }
    }

    /* Delays */

    .delay-1 {
        animation-delay: 0.3s;
    }

    .delay-2 {
        animation-delay: 0.5s;
    }

    .delay-3 {
        animation-delay: 0.7s;
    }

    /* Responsive */

    @media (max-width: 500px) {
        .icon {
            font-size: 26px;
            margin-right: 12px;
        }

        .label,
        .value {
            font-size: 14px;
        }

        .contact-box {
            padding: 20px;
        }
    }

    .contact-box.animated-contact {
        margin-top: 470px;
    }

    .product-nav-tabs.style-3 .nav-tabs-wrapper {
        margin-left: -13%;
        width: 114%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }

    /*----------------------------------------*/
    /* .product-nav-tabs.style-3 .nav-tabs-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
} */
    /*
.product-nav-tabs.style-3 .nav-tabs-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.product-nav-tabs.style-3 .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 5px;
}

.product-nav-tabs.style-3 .nav-tabs li {
    flex: 0 0 auto;
}

.product-nav-tabs.style-3 .nav-tabs li a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.product-nav-tabs.style-3 .nav-tabs li a.active {

    border-radius: 5px;
}


.product-nav-tabs.style-3 .nav-tabs-wrapper::-webkit-scrollbar {
    height: 8px;
}

.product-nav-tabs.style-3 .nav-tabs-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.product-nav-tabs.style-3 .nav-tabs-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.product-nav-tabs.style-3 .nav-tabs-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555; */

    .nav-tabs-wrapper.scroll-category {
        margin-left: 920px;
        /* text-align: right; */
        width: 414px;
    }

    .card.product-application {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* align-content: center; */
    }

    .card-body.product-application-text {
        overflow: auto;
        font-size: 18px;
    }

    /*
Addtional info for user page */

    .header {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .company-detais-info {
        /* display: flex; */
        align-items: center;
        margin-bottom: 20px;
    }

    .company-info img {
        width: 50px;
        height: 50px;
        margin-right: 15px;
    }

    .verified {
        color: #28a745;
        font-size: 0.9rem;
    }

    .location {
        color: #6c757d;
        font-size: 0.9rem;
    }

    .performance-section {
        margin-bottom: 20px;
    }

    .performance-section h5 {
        font-weight: bold;
        margin-bottom: 15px;
    }

    .performance-metrics {
        display: flex;
        justify-content: space-between;
        text-align: center;
    }

    .metric {
        flex: 1;
    }

    .metric h6 {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .metric p {
        font-size: 0.9rem;
        color: #6c757d;
        margin: 0;
    }

    .markets-section {
        margin-bottom: 20px;
    }

    .markets-section h5 {
        font-weight: bold;
        margin-bottom: 15px;
    }

    .markets {
        display: flex;
        justify-content: space-between;
        text-align: center;
    }

    .market {
        flex: 1;
        padding: 10px;
        font-size: 0.9rem;
    }

    .market.united-states {
        background-color: #ff8c38;
        color: white;
    }

    .market.south-korea {
        background-color: #ffb74d;
        color: white;
    }

    .market.canada {
        background-color: #ffd180;
    }

    .market.venezuela {
        background-color: #fff3cd;
    }

    .market.united-kingdom {
        background-color: #fff9e6;
    }

    .market.other {
        background-color: #e9ecef;
    }

    .company-overview {
        margin-bottom: 20px;
    }

    .company-overview h5 {
        font-weight: bold;
        margin-bottom: 15px;
    }

    .overview-details {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
    }

    .overview-details span {
        display: flex;
        align-items: center;
    }

    .overview-details span img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .services-section,
    .quality-section {
        margin-bottom: 20px;
    }

    .services-section h5,
    .quality-section h5 {
        font-weight: bold;
        margin-bottom: 15px;
    }

    .services-section ul,
    .quality-section ul {
        list-style-type: none;
        padding-left: 0;
    }

    .services-section ul li,
    .quality-section ul li {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }

    .buttons {
        display: flex;
        justify-content: space-between;
    }

    .buttons button {
        flex: 1;
        margin: 0 5px;
        padding: 10px;
        border: 1px solid #d1d3e2;
        border-radius: 20px;
        background-color: white;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .horizontal-list {
        display: flex;
        gap: 20px;
        /* Adjust spacing as needed */
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .packaging-list {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        /* adjust spacing between items */
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .packaging-list li {
        flex: 0 0 calc(25% - 15px);
        /* 4 items per row with gap compensation */
        box-sizing: border-box;
    }

    .horizontal-list {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .horizontal-list li {
        flex: 0 0 calc(25% - 15px);
        /* 4 items per row */
        box-sizing: border-box;
        background: #f0f0f0;
        /* optional styling */
        padding: 8px;
        border-radius: 5px;
        text-align: center;
    }

    img.compnay_logo {
        margin-right: -10px;
        border-radius: 10px;
        /* border-block-color: inherit; */
        box-shadow: -3px -2px 10px 0px;
        /* height: 85px; */
        width: 82%;
    }

    /* .company-names {
    padding-left: 235px;
} */

    h5.mb-0.c-name {
        font-size: 22px;
    }

    .company-more-details {
        display: block;
        margin-bottom: 8px;
        /* optional spacing between lines */
    }

    img.addionalInfo-social-icon {
        margin-right: 8px;
        gap: 5px;
        margin-bottom: 12px;
        width: 32px;
    }

    img.addionalInfo-social-supplier-icon {
        width: 58px;
    }

    img.delivery-rate {
        margin-right: 7px;
        margin-left: -60px;
        width: 60px;
    }

    img.since {
        width: 48px !important;
        height: 48px !important;
    }

    img.company-other-details {
        margin-right: 5px;
        /* margin-left: -15px; */
        width: 40px;
    }

    img.packaging-types {
        margin-right: 8px;
        width: 45px;
    }

    /* banner css */

    img.banner-img {
        border-radius: 20px;
        height: 1192px;
    }

    div#slick-slide01 {
        border-radius: 20px;
    }

    div#slick-slide00 {
        border-radius: 20px;
    }

    .product-single.p-2.shadow-sm.rounds.bg-white {
        border-radius: 20px;
    }

    img.WhyChooseUs {
        border-radius: 20px;
    }

    img.rounds {
        border-radius: 20px;
    }

    ul.vm-dropdown.scroll-y {
        border-radius: 0px 0px 20px 20px;
        border: 1px solid #80808085;
    }

    img.side-block-rounds {
        border-radius: 20px;
    }

    .slider-area .block_wrp .img_block {
        border-radius: 20px;
        box-shadow: 0px 0px 12px 0px grey;
        margin-bottom: 20px;
    }

    .card.shadow-sm.border.rounds.p-4 {
        border-radius: 20px;
    }

    a.rounds {
        border-radius: 20px 20px 0px 0px;
    }

    select#category-select {
        border-radius: 20px 0px 0px 20px;
    }

    .product-nav-tabs.scroll-category.style-3.product-wise {
        text-align: end;
        /* margin-left: 673px; */
        border-bottom: 1px solid #ebebeb;
        margin-top: 9px;
    }

    .container.additional-info {
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        margin-top: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .header.additional-info {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .company-info {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .company-info img {
        width: 50px;
        height: 50px;
        margin-right: 15px;
    }

    .verified {
        color: #28a745;
        font-size: 0.9rem;
    }

    .location {
        color: #6c757d;
        font-size: 0.9rem;
    }

    .performance-section {
        margin-bottom: 20px;
    }

    .performance-section h5 {
        font-weight: bold;
        margin-bottom: 15px;
    }

    .performance-metrics {
        display: flex;
        justify-content: space-between;
        text-align: center;
    }

    .metric {
        flex: 1;
    }

    .metric h6 {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .metric p {
        font-size: 0.9rem;
        color: #6c757d;
        margin: 0;
    }

    .markets-section {
        margin-bottom: 20px;
    }

    .markets-section h5 {
        font-weight: bold;
        margin-bottom: 15px;
    }

    .markets {
        display: flex;
        justify-content: space-between;
        text-align: center;
    }

    .market {
        flex: 1;
        padding: 10px;
        font-size: 0.9rem;
    }

    .market.united-states {
        background-color: #ff8c38;
        color: white;
    }

    .market.south-korea {
        background-color: #ffb74d;
        color: white;
    }

    .market.canada {
        background-color: #ffd180;
    }

    .market.venezuela {
        background-color: #fff3cd;
    }

    .market.united-kingdom {
        background-color: #fff9e6;
    }

    .market.other {
        background-color: #e9ecef;
    }

    .company-overview {
        margin-bottom: 20px;
    }

    .company-overview h5 {
        font-weight: bold;
        margin-bottom: 15px;
    }

    .overview-details {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
    }

    .overview-details span {
        display: flex;
        align-items: center;
    }

    .overview-details span img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .services-section,
    .quality-section {
        margin-bottom: 20px;
    }

    .services-section h5,
    .quality-section h5 {
        font-weight: bold;
        margin-bottom: 15px;
    }

    .services-section ul,
    .quality-section ul {
        list-style-type: none;
        padding-left: 0;
    }

    .services-section ul li,
    .quality-section ul li {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }

    .buttons {
        display: flex;
        justify-content: space-between;
    }

    .buttons button {
        flex: 1;
        margin: 0 5px;
        padding: 10px;
        border: 1px solid #d1d3e2;
        border-radius: 20px;
        background-color: white;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        color: #27aefe;
        background-color: #ffffff00;
        border-color: #dee2e600 #dee2e600 #dee2e600;
    }

    button.btn.gmail-btn.w-100.shadow-sm {
        color: #fff;
        background-color: #254670;
    }

    div#drop-zone {
        border-color: #254670 !important;
    }

    span.text-gmail.fw-bold {
        color: #27aefd;
    }

    .company-logo img {
        width: 300px;
        height: 100px;
        margin-right: 15px;
    }

    .captcha-wrapper {
        width: -webkit-fill-available;
        height: 60px;
        overflow: hidden;
        position: relative;
    }

    .captcha-wrapper>div {
        transform: scale(0.73);
        transform-origin: top left;
        position: absolute;
        top: 0;
        left: 0;
    }

    .all-caterory {
        margin-left: 10px;
        margin-right: 10px;
        padding: 4px;
        border-radius: 20px;
        font-size: 19px;
        text-align: center;
        color: #fff;
        background-color: #254670;
        height: 34px;
    }

    .all-category-li a {
        margin-left: 10px !important;
        margin-right: 10px !important;
        padding: 4px !important;
        border-radius: 20px !important;
        font-size: 15px !important;
        text-align: center !important;
        color: #fff !important;
        background-color: #254670 !important;
        height: 34px !important;
    }

    a.category-text {
        color: white;
    }

    @media (max-width: 500px) {
        div#slick-slide01 {
            height: 300px !important;
        }

        div#slick-slide00 {
            height: 300px !important;
        }

        img.compnay_logo {
            margin-right: -10px;
            border-radius: 10px;
            /* border-block-color: inherit; */
            box-shadow: -3px -2px 10px 0px;
            height: 85px;
            width: 100%;
        }

        .performance-metrics {
            display: flex;
            justify-content: center;
            text-align: center;
            flex-direction: column;
        }

        .overview-details span {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .overview-details {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            flex-direction: column;
        }

        .horizontal-list {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            list-style: none;
            padding: 0;
            margin: 0;
            flex-direction: column;
            align-content: stretch;
            justify-content: flex-start;
            align-items: stretch;
        }

        img.product-img {
            border-radius: 20px;
            width: 645px;
            height: 250px;
            object-fit: cover;
            object-position: center;
        }

        img.banner-img {
            height: auto;
        }

        .contact-heading {
            display: none;
        }

        .contact-box.animated-contact {
            margin-top: 0px;
            margin-bottom: 20px;
        }

        h1.title-h1.product-details-title {
            margin-bottom: 20px;
            color: #254670;
        }
    }

    @media (max-width: 1200px) {
        .banner-sm.hover-effect {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .contact-heading {
            display: none;
        }

        .contact-box.animated-contact {
            margin-top: 0px;
            margin-bottom: 20px;
        }
    }

    @media (max-width: 360px) {
        .product-nav-tabs.style-3 .nav-tabs-wrapper {
            text-align: left;
            margin-left: 0px;
            height: 244px;
        }

        img.WhyChooseUs-mainimg {
            border-radius: 34px;
            padding: 6px;
            height: 113px;
            width: 1444px;
        }
    }

    @media (max-width: 370px) {
        img.card-img-top {
            width: 65px !important;
        }
    }

    .captcha-section {
        width: 220px;
        height: 70px;
        overflow: hidden;
        position: relative;
    }

    .captcha-section>div {
        transform: scale(0.89);
        transform-origin: top left;
        position: absolute;
        top: 0;
        left: 5px;
    }

    h2.h2-title {
        border-radius: 20px;
        padding: 20px;
        background: linear-gradient(rgb(56 182 255 / 42%) 0%, rgb(44 70 107 / 37%) 100%);
        text-align: center;
        width: 100%;
        color: #2c466b;
        font-size: 40px;
        font-weight: bold;
        text-shadow: 11px 6px 3px #80808045;
    }

    .cssanimation.leDoorCloseLeft.sequence.hero-title {
        font-size: 40px;
    }

    h1.title-h1 {
        font-size: 32px;
    }

    h2.title-h2 {
        font-size: 18px;
        line-height: 59px;
    }

    h3.title-h3 {
        font-size: 20px;
    }

    h4.title-h4 {
        font-size: 18px;
    }

    h3.title-h3 {
        font-size: 18px;
    }

    h1.title-h1.product-details-title {
        color: #254670;
    }

    .supplier-city a {
        color: #2c466b;
    }

    h2.supplier-city {
        font-size: 18px;
    }

    h4.supplier_name.title-h4 {
        margin-left: 20px;
    }

    .products-name-scroll {
        height: 130px;
        margin-top: 20px;
    }

    .products-name-scroll {
        overflow-y: auto;
        /* <-- auto is the key! */
        height: 130px;
        margin-top: 20px;
        padding-right: 5px;
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 #f1f1f1;
    }

    /* Scrollbar styling for Chrome, Safari */

    .products-name-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .products-name-scroll::-webkit-scrollbar-thumb {
        background-color: #c1c1c1;
        border-radius: 10px;
    }

    .products-name-scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ul.supllier-product-list {
        overflow-y: auto;
        /* <-- auto is the key! */
        height: 120px;
        margin-top: 20px;
        padding-right: 5px;
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 #f1f1f1;
    }

    .row.productss-details {
        column-gap: 50px;
        /* display: flex
; */
        justify-content: center;
        /* align-items: center; */
    }

    .section-title.top-categories {
        margin-top: 34px;
    }

    .section-title.products-title.supplier-sub-product {
        margin-top: 65px;
    }

    .tab-content.supplier-hot-products {
        overflow-y: auto;
        overflow-x: hidden;
        height: 400px;
        padding-bottom: 25px;
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 #f1f1f1;
    }

    .title-h2.latest-product {
        margin-top: 30px;
    }

    .tab-pane.fade.in.show.active.supplier-logo-tab {
        margin-top: 21px;
    }

    img.model-main-img {
        border-radius: 20px;
    }

    img.model-mini-img {
        border-radius: 20px;
    }

    .model-price {
        font-weight: 300px;
        font-weight: 524px;
        font-size: 18px;
    }

    .product-single.p-2.shadow-sm.rounds.bg-white.sub-product-box {
        width: 400px;
    }

    /* email.otp */

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

    .containerOtp {
        justify-content: center;
        background-color: rgba(30, 30, 30, 0.8);
        padding: 3rem;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        text-align: center;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        max-width: 400px;
        width: 100%;
        color: white;
    }

    .otp-input {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .otp-input input {
        width: 50px;
        height: 50px;
        margin: 0 8px;
        text-align: center;
        font-size: 1.5rem;
        border: 2px solid #6665f1;
        border-radius: 12px;
        background-color: rgba(42, 42, 42, 0.8);
        color: #ffffff;
        transition: all 0.3s ease;
    }

    .otp-input input:focus {
        border-color: #a556f6;
        box-shadow: 0 0 0 2px rgba(166, 86, 246, 0.3);
        outline: none;
    }

    .otp-input input::-webkit-outer-spin-button,
    .otp-input input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .otp-input input[type="number"] {
        -moz-appearance: textfield;
    }

    .otpbutton {
        background: linear-gradient(135deg, #6665f1, #a556f6);
        color: white;
        border: 2px solid #6665f1;
        padding: 12px 24px;
        font-size: 1rem;
        border-radius: 8px;
        cursor: pointer;
        margin: 5px;
        transition: all 0.3s ease;
        font-weight: 500;
        letter-spacing: 0.5px;
    }

    .otpbutton:hover {
        background: linear-gradient(135deg, #a556f6, #6665f1);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(166, 86, 246, 0.3);
    }

    .otpbutton:disabled {
        background: #cccccc;
        border-color: #999999;
        color: #666666;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    #timer {
        font-size: 1rem;
        color: #a556f6;
        font-weight: 500;
        margin-left: 10px;
    }

    @keyframes pulse {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }

    .expired {
        animation: pulse 2s infinite;
        color: #ff4444;
    }

    .resend-text {
        margin-top: 1rem;
        font-size: 0.9rem;
        color: #b0b0b0;
    }

    .resend-link {
        color: #6665f1;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .resend-link:hover {
        color: #a556f6;
        text-decoration: underline;
    }

    #email {
        color: #38b6ff;
        font-weight: 500;
    }

    .col-md-12.otp-verify-blog {
        align-items: center;
        justify-content: center;
        justify-items: center;
    }

    /*
login button */

    .custom-btn {
        width: 130px;
        height: 40px;
        color: #fff;
        border-radius: 5px;
        padding: 10px 25px;
        font-family: "Lato", sans-serif;
        font-weight: 500;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        display: inline-block;
        box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
        outline: none;
    }

    /* 3 */

    .btn-3 {
        background: rgb(0, 172, 238);
        background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
        width: 130px;
        height: 40px;
        line-height: 42px;
        padding: 0;
        border: none;
    }

    .btn-3 span {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .btn-3:before,
    .btn-3:after {
        position: absolute;
        content: "";
        right: 0;
        top: 0;
        background: rgba(2, 126, 251, 1);
        transition: all 0.3s ease;
    }

    .btn-3:before {
        height: 0%;
        width: 2px;
    }

    .btn-3:after {
        width: 0%;
        height: 2px;
    }

    .btn-3:hover {
        background: transparent;
        box-shadow: none;
    }

    .btn-3:hover:before {
        height: 100%;
    }

    .btn-3:hover:after {
        width: 100%;
    }

    .btn-3 span:hover {
        color: rgba(2, 126, 251, 1);
    }

    .btn-3 span:before,
    .btn-3 span:after {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        background: rgba(2, 126, 251, 1);
        transition: all 0.3s ease;
    }

    .btn-3 span:before {
        width: 2px;
        height: 0%;
    }

    .btn-3 span:after {
        width: 0%;
        height: 2px;
    }

    .btn-3 span:hover:before {
        height: 100%;
    }

    .btn-3 span:hover:after {
        width: 100%;
    }

    .col-md-2.col-lg-2.login-button {
        text-align: right;
        /* justify-content: right; */
    }

    .section-title.products-title {
        margin-top: 20px;
    }

    /* Display user name after login  */

    .userName {
        font-size: 13px;
        text-transform: uppercase;
        /* letter-spacing: 0.5em; */
        display: inline-block;
        border: 4px double rgba(255, 255, 255, 0.25);
        border-width: 4px 0;
        /* padding: 1.5em 0em; */
        position: absolute;
        top: 18%;
        left: 114%;
        /* width: 40em; */
        margin: 0 0 0 -20em;

        .spanuserName {
            font-size: 18px;
            text-align: center;
            /* font: 700 4em / 1 "Oswald", sans-serif; */
            letter-spacing: 0;
            padding: 0.25em 0 0.325em;
            display: block;
            margin: 0 auto;
            text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
            /* Clip Background Image */
            background: url(pipingcenterLogo/animation-logo.png) repeat-y;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            /* Animate Background Image */
            -webkit-text-fill-color: transparent;
            -webkit-animation: aitf 80s linear infinite;
            /* Activate hardware acceleration for smoother animations */
            -webkit-transform: translate3d(0, 0, 0);
            -webkit-backface-visibility: hidden;
        }
    }

    /* Animate Background Image */

    @-webkit-keyframes aitf {
        0% {
            background-position: 0% 50%;
        }

        100% {
            background-position: 100% 50%;
        }
    }

    .col-md-2.col-lg-2.usernames {
        margin-top: -73px;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style-type: none;
        text-decoration: none;
    }

    .bredcrum {
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: ui-sans-serif, system-ui, sans-serif;
        /* min-height: 100vh; */
    }

    .breadcrumb {
        background-color: #d6ecf880;
        display: flex;
        box-shadow: 0 8px 14px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        padding: 0.75rem 1.25rem;
        border-radius: 35px;
    }

    .breadcrumb-links {
        display: flex;
        column-gap: 1rem;
        align-items: center;
    }

    .breadcrumb-links>li:nth-child(n+4) {
        display: none;
    }

    .breadcrumb-box {
        display: flex;
        align-items: center;
    }

    .breadcrumb-link {
        color: #9ca3af;
    }

    .breadcrumb-box:hover>*:not(.breadcrumb-icon) {
        color: #38b6ff;
    }

    .breadcrumb-icon,
    .breadcrumb-icon-home {
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        color: #9ca3af;
    }

    .breadcrumb-links li:first-child .breadcrumb-text {
        display: none;
    }

    .breadcrumb-text {
        margin-left: 1rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 500;
        color: #6b7280;
    }

    @media (min-width: 640px) {
        .breadcrumb-links>li:nth-child(n+4) {
            display: block;
        }

        .breadcrumb-links li:first-child .breadcrumb-text {
            display: block;
        }
    }

    .h1-bredcrum-title {
        margin-bottom: 30px;
    }

    h2.title-h2.category-product {
        line-height: 32px;
    }

    img.prduct-catelog {
        width: 90px;
    }

    .catelog {
        padding-top: 10px;
    }

    h1.pending-supplier {
        font-weight: 100;
        margin-left: 50px;
    }

    .product-single.p-2.shadow-xl.rounds.bg-white.poduct-shaddow {
        box-shadow: 0px 0px 10px -6px;
    }

    .poduct-shaddow {
        box-shadow: 0px 0px 10px -6px;
    }

    .row.category-row {
        max-height: 1000px;
        /* Set max height */
        overflow-y: auto;
        /* Enable scrolling if needed */
        scrollbar-width: thin;
        /* For Firefox: thin scrollbar */
        scrollbar-color: #ccc transparent;
        /* For Firefox: optional styling */
    }

    /* Optional: Hide scrollbar in WebKit (Chrome, Safari) when not needed */

    .row.category-row::-webkit-scrollbar {
        width: 8px;
    }

    .row.category-row::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }

    .row.category-row::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .background-color {
        background-color: #e1f1f938;
    }

    .top-spacing {
        padding-top: 40px;
    }

    .product-single.p-2.shadow-sm.poduct-shaddow.rounds.bg-white.product-wise-prowidth {
        width: 330px;
    }

    @media (max-width: 500px) {
        .description-all {
            margin-left: 0px;
            width: 320px;
        }

        .supplier-form-name {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }

        h2.mb-0.title-h2.supplier-name {
            line-height: 36px;
        }
    }

    @media (max-width: 400px) {
        .bredcrum {
            display: flex;
            align-items: center;
            font-family: ui-sans-serif, system-ui, sans-serif;
        }

        .h1-bredcrum-title {
            line-height: 31px;
            font-size: 20px;
            /* margin-bottom: 30px; */
        }

        .breadcrumb-links {
            display: flex;
            column-gap: 1rem;
            align-items: flex-start;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
        }

        .breadcrumb {
            background-color: #d6ecf880;
            display: flex;
            box-shadow: 0 8px 14px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            padding: 0.75rem 1.25rem;
            border-radius: 35px;
            flex-direction: column;
        }

        h1.h1-title.home-main-title {
            line-height: 31px;
            font-size: 19px;
        }
    }

    /* =============ABOUT PAGE ================ */

    .about-page-main-banner {
        text-align: center;
        border: 1px solid grey;
        border-radius: 15px;
        width: 80%;
        padding: 15px;
        background: #0000004d;
        box-shadow: -3px 3px 9px 0px white;
    }

    .about-page-main-banner h1 {
        font-size: 45px !important;
    }

    /* Tablet */

    @media (max-width: 991px) {
        .about-page-main-banner {
            padding: 20px 18px;
            border-radius: 12px;
        }

        .about-page-main-banner h1 {
            font-size: 36px !important;
        }
    }

    /* Mobile */

    @media (max-width: 767px) {
        .about-page-main-banner {
            padding: 18px 15px;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(255, 255, 255, 0.35);
        }

        .about-page-main-banner h1 {
            font-size: 28px !important;
            line-height: 1.3;
        }
    }

    /* Small Mobile */

    @media (max-width: 480px) {
        .about-page-main-banner {
            padding: 15px 12px;
            border-radius: 8px;
        }

        .about-page-main-banner h1 {
            font-weight: bold;
            font-size: 25px !important;
            line-height: 30px !important;
        }
    }

    /* Extra Small Devices */

    @media (max-width: 360px) {
        .about-page-main-banner {
            padding: 12px 10px;
        }

        .about-page-main-banner h1 {
            font-size: 20px !important;
        }
    }

    .about-page-main-banner h1 span,
    .main-banner-para {
        color: white !important;
    }

    .product-width {
        width: 330px;
    }

    /* / whats app flocating button */

    a {
        text-decoration: none;
    }

    .floating_btn {
        position: absolute;
        bottom: 25px;
        /* right: 332px; */
        width: 57px;
        height: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    @keyframes pulsing {
        to {
            box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
        }
    }

    .contact_icon {
        background-color: #42db87;
        color: #fff;
        width: 40px;
        height: 40px;
        font-size: 30px;
        border-radius: 50px;
        text-align: center;
        box-shadow: 2px 2px 3px #999;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translatey(0px);
        animation: pulse 1.5s infinite;
        box-shadow: 0px 0px 29px 6px #42db87;
        -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
        -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
        -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
        animation: pulsing 1.25s infinite cubic-bezier(0.2, 0, 0, 1);
        font-weight: normal;
        font-family: sans-serif;
        text-decoration: none !important;
        transition: all 300ms ease-in-out;
    }

    .text_icon {
        margin-top: 8px;
        color: #707070;
        font-size: 13px;
    }

    .my-float {
        color: #fff !important;
        font-size: 20px !important;
    }

    .hot-product-wantsapp {
        background-color: #42db87;
        color: #fff;
        width: 40px;
        height: 40px;
        font-size: 30px;
        border-radius: 50px;
        text-align: center;
        box-shadow: 2px 2px 3px #999;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translatey(0px);
        animation: pulse 1.5s infinite;
        box-shadow: 0px 0px 29px 6px #42db87;
        -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
        -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
        -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
        animation: pulsing 1.25s infinite cubic-bezier(0.2, 0, 0, 1);
        font-weight: normal;
        font-family: sans-serif;
        text-decoration: none !important;
        transition: all 300ms ease-in-out;
    }

    .supplier-hot-produtsfloat {
        position: absolute;
        bottom: 49px;
        /* right: 332px; */
        width: 57px;
        height: 74px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    ul.inquirylist {
        overflow-y: scroll;
        height: 400px;
    }

    img.inquiry-productimg {
        border-radius: 20px;
    }

    h2.mb-0.c-name.title-h2.supplier-name {
        margin-top: -40px;
    }

    span.text-warning.supplier-star {
        font-size: 20px;
    }

    img.blog-img {
        border-radius: 20px;
    }

    .card.h-100.blog-list {
        border-radius: 20px;
    }

    img.card-img-top.blog-list {
        border-radius: 10px;
    }

    .col-lg-2.col-sm-6.top-seller {
        /* margin-top: 25px; */
        padding-left: 86px;
    }

    h2.card-title.blog-h2 {
        line-height: normal;
        font-size: 16px;
    }

    @media (max-width: 372px) {
        img.card-img-top.blog-list {
            width: 350px !important;
        }
    }

    @media (max-width: 534px) {
        .section-title {
            margin-top: 25px;
        }
    }

    .blur-shaddow {
        position: absolute;
        top: 52%;
        line-height: 16px;
        font-weight: 600;
        color: white;
        border-radius: 20px;
        border: 1px solid #80808057;
        padding: 20px;
        background: #1b2b3c8a;
        height: 155px;
        width: 600px;
        box-shadow: 0px 0px 20px 4px #ffffffc2;
    }

    .social-icons.style-2 a i {
        width: 25px;
    }

    .section-title {
        margin-top: 20px;
    }

    @media (max-width: 690px) {
        .blur-shaddow {
            margin-top: -25px;
            height: 141px;
            margin-left: -47px;
            width: 316px;
            font-size: 8px;
            line-height: 16px;
            margin-bottom: 30px;
        }

        .cssanimation.leDoorCloseLeft.sequence.hero-title {
            font-size: 17px;
            line-height: 20px;
        }

        .blur-shaddow strong {
            font-size: 10px !important;
            line-height: 18px !important;
        }

        .slider-caption p {
            font-size: 12px;
            animation-duration: 1s;
            animation-fill-mode: both;
        }

        ul.slick-dots {
            display: none !important;
        }
    }

    .wpb_wrapper {
        margin-left: 50px;
    }

    @media (max-width: 770px) {
        .wpb_wrapper {
            margin-left: 0px;
        }

        h2.strong {
            line-height: normal;
            font-size: 28px;
        }
    }

    .row.all-products-details {
        padding: 17px;
    }

    h4.supplier_name.title-h4 {
        margin-left: 0px;
    }

    .top-category {
        width: 159px !important;
    }

    .h1-bredcrum-title {
        font-size: 35px;
        margin-bottom: 30px;
    }

    @media (max-width: 580px) and (min-width: 361px) {
        .mobile-product-width {
            width: 3.71% !important;
        }

        .banner-info p {
            font-size: 17px;
            line-height: 25px;
        }

        img.WhyChooseUs-mainimg {
            height: 150px;
        }

        .description-all {
            margin-left: 0px;
            width: 373px;
        }

        .cart-dropdown {
            width: 344px;
            right: 14px;
        }
    }

    @media (max-width: 360px) {
        .product-single {
            border-radius: 20px;
            border: 1px solid #ebebeb;
            padding: 0px 19px;
        }
    }

    @media (max-width: 1200px) {
        .product-nav-tabs.style-3 .nav-tabs-wrapper {
            margin-left: 20px;
            /* width: 475px; */
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: #888 #f1f1f1;
        }
    }

    @media (max-width: 500px) {
        .modal.show .modal-dialog {
            max-width: 100% !important;
        }
    }

    a.whatsapp-link {
        margin-right: 0px;
    }

    .product-latestkits {
        border-radius: 20px;
        border: 1px solid #ebebeb;
        padding: 15px 20px;
        position: relative;
        -webkit-transition: all 0.2s ease-in-out 0s;
        -o-transition: all 0.2s ease-in-out 0s;
        transition: all 0.2s ease-in-out 0s;
    }

    .modal-dialog.modal-dialog-centered.my-modal {
        width: 977px;
    }

    @media only screen and (min-width: 320px) and (max-width: 360px) {
        .product-single:hover .product-action {
            opacity: 1 !important;
            visibility: visible !important;
        }
    }

    .slick-track {
        /* width: 32040px !important; */
        width: max-content !important;
    }

    .supplier-sub-products {
        /* width: 344px !important; */
        width: max-content !important;
    }

    @media (min-width: 480px) {
        .row.best-seller.cv-visible.width-products.slick-initialized.slick-slider.slick-dotted .slick-track {
            width: auto !important;
        }
    }

    .product-name-width {
        width: 154px;
    }

    /* .col-lg-3.slick-slide.slick-active {
    width: 350px !important;
} */

    .col-lg-3.category-types.slick-slide.slick-active {
        margin-right: 48px;
    }

    ul.supplier_product_detail.fa-ul.material-product-list {
        overflow: auto;
        height: 170px;
    }

    .social-icons-2.pull-right a {
        margin-right: 4px;
        gap: 5px;
    }

    /* ====Home Banner Slide============= MAIN PARENT ================= */

    .vertical-slider {
        position: relative;
        width: 100%;
        height: 500px;
        overflow: hidden;
    }

    /* ================= TRACK (CONTAINER OF SLIDES) ================= */

    .vertical-slider .track {
        display: flex;
        flex-direction: column;
        height: 100%;
        transition: transform 0.8s ease-in-out;
    }

    /* ================= SINGLE SLIDE ================= */

    .vertical-slider .track .slide {
        position: relative;
        width: 100%;
        height: 500px;
        flex-shrink: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* ================= OVERLAY CONTENT ================= */

    .vertical-slider .track .slide .content {
        position: absolute;
        bottom: 40px;
        left: 40px;
        background: rgba(0, 0, 0, 0.6);
        padding: 20px 30px;
        border-radius: 6px;
        color: #fff;
        max-width: 500px;
    }

    /* ================= TITLE ================= */

    .vertical-slider .track .slide .content h2 {
        font-size: 32px;
        font-weight: 700;
        margin: 0 0 10px 0;
    }

    /* ================= OPTIONAL DESCRIPTION ================= */

    .vertical-slider .track .slide .content p {
        font-size: 16px;
        margin: 0;
        line-height: 1.5;
    }

    /* ================= OPTIONAL BUTTON ================= */

    .vertical-slider .track .slide .content .btn {
        display: inline-block;
        margin-top: 10px;
        padding: 8px 18px;
        background: #ffffff;
        color: #000;
        border-radius: 4px;
        text-decoration: none;
        transition: 0.3s;
    }

    .vertical-slider .track .slide .content .btn:hover {
        background: #000;
        color: #fff;
    }

    /* ================= RESPONSIVE ================= */

    @media (max-width: 768px) {
        .vertical-slider {
            height: 350px;
        }

        .vertical-slider .track .slide {
            height: 350px;
        }

        .vertical-slider .track .slide .content {
            bottom: 20px;
            left: 20px;
            padding: 15px 20px;
        }

        .vertical-slider .track .slide .content h2 {
            font-size: 22px;
        }
    }

    /* ========================= BREADCRUMB SECTION (PARENT)========================= */

    .breadcrumb-section {
        position: relative;
        width: 100%;
        height: 300px;
        background-image: url(assets/images/brands/piping-center-breadcrumb-imga.jpg);
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    /* =========================
   RADIAL GRADIENT OVERLAY
========================= */

    .breadcrumb-section .breadcrumb-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Radial Gradient Overlay */
        background: radial-gradient(circle at center, rgb(0 0 0 / 15%) 0%, rgb(44 70 107 / 58%) 70%, rgb(42 70 105 / 54%) 100%);
        z-index: 1;
    }

    /* =========================
   CONTAINER
========================= */

    .breadcrumb-section .breadcrumb-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        z-index: 2;
    }

    /* =========================
   CONTENT WRAPPER
========================= */

    .breadcrumb-section .breadcrumb-content {
        text-align: center;
        color: #fff;
    }

    /* =========================
   TITLE
========================= */

    .breadcrumb-section .breadcrumb-title {
        font-size: 57px;
        font-weight: 700;
        margin-bottom: 10px;
        color: white;
    }

    /* =========================
   BREADCRUMB LIST
========================= */

    .breadcrumb-section .breadcrumb-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* =========================
   LIST ITEMS
========================= */

    .breadcrumb-section .breadcrumb-item {
        display: inline-block;
        font-size: 16px;
        color: #ddd;
    }

    /* Separator */

    .breadcrumb-section .breadcrumb-item::after {
        content: ">";
        margin: 0 8px;
        color: #bbb;
    }

    /* Remove separator for last item */

    .breadcrumb-section .breadcrumb-item:last-child::after {
        content: "";
    }

    /* =========================
   LINKS
========================= */

    .breadcrumb-section .breadcrumb-item a {
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
        transition: 0.3s;
    }

    .breadcrumb-section .breadcrumb-item a:hover {
        color: #f39c12;
    }

    /* Active Item */

    .breadcrumb-section .breadcrumb-item.active {
        color: #ffffff;
        font-weight: bold;
    }

    /*===========================Back To Top Button==============================*/

    #backToTop {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 55px;
        height: 55px;
        border: none;
        border-radius: 25%;
        background: linear-gradient(135deg, #38b5fe, #2d456a);
        color: white;
        font-size: 22px;
        cursor: pointer;
        box-shadow: 0 10px 25px rgb(57 182 255 / 39%);
        display: none;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 999;
    }

    /* Hover effect */

    #backToTop:hover {
        transform: translateY(-5px) scale(1.1);
        box-shadow: 0 15px 35px rgba(255, 106, 0, 0.5);
    }

    /* Pulse animation */

    #backToTop::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        animation: pulse 1.5s infinite;
        z-index: -1;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
            opacity: 0.6;
        }

        70% {
            transform: scale(1.4);
            opacity: 0;
        }

        100% {
            transform: scale(1.4);
            opacity: 0;
        }
    }

    .product-list-item {
        list-style: none;
        position: relative;
        padding-left: 20px;
    }

    .product-list-item::before {
        content: "\f105";
        /* Font Awesome angle-right icon */
        font-family: FontAwesome;
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 2px;
        color: #007bff;
    }

    .product-list-item a {
        text-decoration: none;
    }

    .product-list-item a:hover {
        text-decoration: underline;
    }

    /* ==================Header Dropdown================= */
    /* Main Menu Container */

    .menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Menu Items */

    .menu-item-has-children {
        position: relative;
        display: inline-block;
    }

    /* Links Styling */

    .menu-item-has-children>a {
        display: block;
        padding: 12px 16px;
        text-decoration: none;
        color: #333;
        font-weight: 500;
        transition: all 0.4s ease;
        /* Enhanced transition */
    }

    .menu-item-has-children>a:hover {
        background-color: #f5f5f5;
        color: #007bff;
    }

    /* Show Arrow Up on Hover */

    .menu-item-has-children:hover>a:after {
        transform: rotate(180deg);
    }

    /* First Level Dropdown */

    .menu-item-has-children>ul {
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        min-width: 248px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        box-shadow: -1px 0px 8px 0px #80808075;
        border-radius: 3px;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-40px);
        transition: all 0.45s ease;
        z-index: 1000;
        padding: 8px 0;
        list-style: none;
        margin: 0;
    }

    /* Show Dropdown on Hover */

    .menu-item-has-children:hover>ul {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* Second Level (Nested) Dropdown */

    .menu-item-has-children ul ul {
        top: 0;
        left: 100%;
        margin-left: 5px;
        transform: translateX(-30px);
        transition: all 0.45s ease;
    }

    /* Show Nested Dropdown */

    .menu-item-has-children:hover>ul ul {
        transform: translateX(0);
    }

    /* Submenu Items */

    .menu-item-has-children ul li {
        position: relative;
        width: 100%;
    }

    .menu-item-has-children ul li a {
        margin: 0 !important;
    }

    .menu-item-has-children ul a {
        display: block;
        padding: 10px 18px;
        color: #444;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.4s ease;
        /* Smooth bg + padding transition */
    }

    .menu-item-has-children ul a:hover {
        background-color: #a0cfff;
        color: #007bff;
        /* padding-left: 24px; */
    }

    /* Responsive - Mobile Friendly */

    @media (max-width: 768px) {
        .menu-item-has-children {
            display: block;
            width: 100%;
        }

        .menu-item-has-children>ul,
        .menu-item-has-children ul ul {
            position: static;
            box-shadow: none;
            border: none;
            opacity: 1;
            visibility: visible;
            transform: none;
            display: none;
        }

        .menu-item-has-children:hover>ul {
            display: block;
        }
    }

    /* =============Background CSS ============================ */

    .industrial-background {
        position: relative;
        overflow: hidden;
        background: linear-gradient(90deg, rgb(43 70 106 / 16%), rgb(255 255 255)), radial-gradient(circle at top right, rgb(241 243 255), #f1f3ff 35%), radial-gradient(circle at bottom left, rgb(255 0 0), #970000 40%);
        color: #fff;
        isolation: isolate;
    }

    /* Industrial Grid Pattern */

    .industrial-background::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgb(44 70 107 / 38%) 1px, #00000000 1px), linear-gradient(90deg, rgb(43 68 108 / 35%) 1px, transparent 1px);
        background-size: 40px 40px;
        background-size: 40px 40px;
        opacity: 0.35;
        pointer-events: none;
    }

    /* Soft Glow */

    .industrial-background::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        top: -180px;
        right: -180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgb(42 68 106 / 50%), #2b476d00 70%);
        pointer-events: none;
    }

    /* Keep content above effects */

    .industrial-background>* {
        position: relative;
        z-index: 2;
    }

    /* =================Industrial Background Img =========================== */

    .industrial-background-img {
        position: relative;
        background-image: linear-gradient(rgb(44 70 107), rgb(18 32 52 / 8%)), url("/breadcrumb-background/indusrial-background-imgd.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        padding: 20px 0;
        overflow: hidden;
    }

    .industrial-background-img::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08) 0, transparent 30%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0, transparent 35%);
        animation: floatBackground 12s ease-in-out infinite alternate;
    }

    .industrial-background-img>* {
        position: relative;
        z-index: 2;
    }

    @keyframes floatBackground {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(-25px);
        }
    }

    @media (max-width: 768px) {
        .industrial-background-img {
            background-attachment: scroll;
            padding: 20px 0;
        }
    }

    .product-wise-card {
        width: 280px;
    }

    .best-seller {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    /* Cap image height so tall/landscape photos don't blow out the card */

    .best-seller .product-thumb-lattest {
        height: 180px;
        overflow: hidden;
        border-radius: 6px;
    }

    .best-seller .product-thumb-lattest img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Make sure the badge isn't clipped by the card's rounded-corner overflow */

    .best-seller .product-single.rounds {
        overflow: visible;
    }

    /* If .rounds is used elsewhere and you don't want to touch it globally,
   scope it tighter instead: */

    .best-seller .plan-badge {
        z-index: 20;
    }

    .best-seller.slick-slider {
        overflow: hidden;
    }

    .best-seller .slick-list {
        overflow: hidden !important;
        margin: 0 -8px;
        /* matches the .slick-slide-item's 8px padding */
    }

    .best-seller .slick-track {
        display: flex;
    }

    .best-seller .slick-slide {
        height: auto;
    }

    /* =========================================================
   SHARED SEARCH BAR
   ========================================================= */

    .category-search-wrapper,
    .material-search-wrapper {
        position: relative;
    }

    .category-search-input,
    .material-search-input {
        height: 58px;
        border-radius: 12px;
        padding: 0 65px 0 20px;
        border: 1px solid #ddd;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        font-size: 16px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .category-search-input:focus,
    .material-search-input:focus {
        border-color: #0d6efd;
        box-shadow: 0 5px 25px rgba(13, 110, 253, 0.15);
        outline: none;
    }

    .search-btn {
        position: absolute;
        right: 6px;
        top: 6px;
        height: 46px;
        width: 46px;
        border: 0;
        border-radius: 10px;
        background: #0d6efd;
        color: #fff;
        transition: background 0.3s ease;
    }

    .search-btn:hover {
        background: #0b5ed7;
    }

    /* =========================================================
   SECTION TITLES
   ========================================================= */

    .section-subtitle {
        display: inline-block;
        color: #0d6efd;
        font-weight: 600;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .section-main-title {
        font-size: 38px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .section-description {
        max-width: 850px;
        margin: 0 auto;
        color: #666;
        line-height: 1.8;
    }

    /* ==========================Breadcrumb===================== */

    .industrial-page-header {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-top: 30px;
        margin-bottom: 25px;
        padding: 22px 30px 28px;
        border: 1px solid rgba(0, 150, 255, 0.16);
        border-radius: 12px;
        background:
            linear-gradient(135deg,
                rgba(7, 22, 36, 0.99),
                rgba(10, 39, 60, 0.98),
                rgba(8, 29, 46, 0.98));
        box-shadow:
            0 8px 25px rgba(0, 25, 45, 0.10);
        isolation: isolate;
    }

    /* =============ANIMATED TECHNICAL GRID========= */

    .industrial-page-header::before {
        content: "";
        position: absolute;
        inset: -100%;
        z-index: -2;
        background-image:
            linear-gradient(rgba(0, 150, 255, 0.075) 1px,
                transparent 1px),
            linear-gradient(90deg,
                rgba(0, 150, 255, 0.075) 1px,
                transparent 1px);
        background-size: 45px 45px;
        transform: rotate(-3deg);
        animation:
            industrialGridMove 18s linear infinite;
        pointer-events: none;
    }


    /* ========= MOVING LIGHT OVERLAY======== */

    .industrial-page-header::after {
        content: "";
        position: absolute;
        top: -120%;
        left: -70%;
        width: 55%;
        height: 350%;
        z-index: -1;
        background:
            linear-gradient(90deg,
                transparent 0%,
                rgba(0, 150, 255, 0.04) 25%,
                rgba(0, 150, 255, 0.14) 45%,
                rgba(255, 255, 255, 0.09) 50%,
                rgba(0, 150, 255, 0.14) 55%,
                rgba(0, 150, 255, 0.04) 75%,
                transparent 100%);
        transform: rotate(20deg);
        animation:
            industrialLightSweep 8s ease-in-out infinite;
        pointer-events: none;
    }

    /* =============TOP INDUSTRIAL ACCENT============== */
    .industrial-page-header .industrial-breadcrumb::before {
        content: "";
        display: block;
        width: 45px;
        height: 3px;
        margin-bottom: 12px;
        border-radius: 10px;
        background: #0096ff;
        box-shadow:
            0 0 10px rgba(0, 150, 255, 0.35);
    }


    /* ======BREADCRUMB================== */
    .industrial-page-header .industrial-breadcrumb {
        position: relative;
        z-index: 2;
        margin-bottom: 15px;
    }


    /* =======BREADCRUMB LIST=================== */
    .industrial-page-header .industrial-breadcrumb .breadcrumb-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 13px;
    }

    /* =====BREADCRUMB ITEM=================== */
    .industrial-page-header .industrial-breadcrumb .breadcrumb-list .breadcrumb-item {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    /* ==============BREADCRUMB LINKS================== */
    .industrial-page-header .industrial-breadcrumb .breadcrumb-list .breadcrumb-item a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.68);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition:
            color 0.25s ease,
            transform 0.25s ease;
    }


    /* ===========BREADCRUMB LINK ICON================== */
    .industrial-page-header .industrial-breadcrumb .breadcrumb-item a i {
        font-size: 11px;
        transition:
            transform 0.25s ease,
            color 0.25s ease;
    }


    /* ============BREADCRUMB HOVER==================== */
    .industrial-page-header .industrial-breadcrumb .breadcrumb-item a:hover {
        color: #ffffff;
        transform: translateY(-1px);
    }

    .industrial-page-header .industrial-breadcrumb .breadcrumb-item a:hover i {
        color: #54bfff;
        transform: scale(1.1);
    }


    /* ===============BREADCRUMB SEPARATOR============== */
    .industrial-page-header .industrial-breadcrumb .breadcrumb-list .breadcrumb-separator {
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.30);
        font-size: 9px;
    }


    /* =================ACTIVE BREADCRUMB=============== */
    .industrial-page-header .industrial-breadcrumb .breadcrumb-list .breadcrumb-item.active {
        position: relative;
        color: #54bfff;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Active underline */
    .industrial-page-header .industrial-breadcrumb .breadcrumb-item.active::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        height: 1px;
        border-radius: 10px;
        background: rgba(84, 191, 255, 0.65);
    }

    /* ============PAGE TITLE========================== */
    .industrial-page-header .industrial-page-title {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        width: 100%;
        margin: 0;
        padding: 12px 0 5px;
    }


    /* ==========PAGE TITLE H1================ */
    .industrial-page-header .industrial-page-title .title-h1 {
        position: relative;
        margin: 0;
        color: #ffffff;
        text-align: center;
        font-size: clamp(27px, 3vw, 40px);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.4px;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.28);
    }


    /* ========TITLE LINES============================ */
    .industrial-page-header .industrial-page-title .title-line {
        position: relative;
        width: 55px;
        height: 3px;
        flex-shrink: 0;
        overflow: hidden;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.25);
        box-shadow:
            0 0 8px rgba(0, 150, 255, 0.12);
    }


    /* =========ANIMATED TITLE LINE==================== */
    .industrial-page-header .industrial-page-title .title-line::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background:
            linear-gradient(90deg,
                transparent,
                #0096ff,
                #54bfff,
                transparent);
        animation:
            titleLineMove 2.8s ease-in-out infinite;
    }


    /* ========CENTER TITLE GLOW======================= */
    .industrial-page-header .industrial-page-title::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 240px;
        height: 90px;
        transform:
            translate(-50%, -50%) scale(0.95);
        border-radius: 50%;
        background:
            radial-gradient(ellipse,
                rgba(0, 150, 255, 0.16),
                transparent 70%);
        filter: blur(25px);
        z-index: -1;
        animation:
            titleGlow 4s ease-in-out infinite alternate;
        pointer-events: none;
    }

    /* ==========GRID ANIMATION====================== */
    @keyframes industrialGridMove {
        0% {
            transform:
                translate(0, 0) rotate(-3deg);
        }

        50% {
            transform:
                translate(25px, 25px) rotate(-3deg);
        }

        100% {
            transform:
                translate(0, 0) rotate(-3deg);
        }
    }


    /* =======LIGHT SWEEP================== */
    @keyframes industrialLightSweep {
        0% {
            left: -70%;
            opacity: 0;
        }

        12% {
            opacity: 0.8;
        }

        50% {
            left: 120%;
            opacity: 0.65;
        }

        68% {
            opacity: 0;
        }

        100% {
            left: 120%;
            opacity: 0;
        }
    }


    /* =======TITLE LINE ANIMATION=============== */
    @keyframes titleLineMove {
        0% {
            left: -100%;
        }

        45% {
            left: 100%;
        }

        100% {
            left: 100%;
        }
    }


    /* ===========TITLE GLOW ANIMATION================= */
    @keyframes titleGlow {
        0% {
            opacity: 0.40;
            transform:
                translate(-50%, -50%) scale(0.90);
        }

        100% {
            opacity: 0.85;
            transform:
                translate(-50%, -50%) scale(1.15);
        }
    }


    /* ===========TABLET================== */
    @media (max-width: 991px) {
        .industrial-page-header {
            padding: 20px 24px 25px;
        }

        .industrial-page-header .industrial-page-title .title-h1 {
            font-size: 32px;
        }

        .industrial-page-header .industrial-page-title .title-line {
            width: 42px;
        }
    }


    /* ==========MOBILE================== */
    @media (max-width: 767px) {
        .industrial-page-header {
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 17px 16px 21px;
            border-radius: 9px;
        }

        /* Top accent */
        .industrial-page-header .industrial-breadcrumb::before {
            width: 32px;
            height: 2px;
            margin-bottom: 9px;
        }

        /* Breadcrumb */
        .industrial-page-header .industrial-breadcrumb {
            margin-bottom: 10px;
        }

        .industrial-page-header .industrial-breadcrumb .breadcrumb-list {
            gap: 6px;
            font-size: 11px;
        }

        .industrial-page-header .industrial-breadcrumb .breadcrumb-item a {
            font-size: 11px;
        }

        .industrial-page-header .industrial-breadcrumb .breadcrumb-item.active {
            font-size: 11px;
        }

        /* Page title */
        .industrial-page-header .industrial-page-title {
            gap: 9px;
            padding-top: 8px;
        }

        .industrial-page-header .industrial-page-title .title-h1 {
            font-size: 25px;
            letter-spacing: -0.2px;
        }

        /* Title lines */
        .industrial-page-header .industrial-page-title .title-line {
            width: 25px;
            height: 2px;
        }

        /* Glow */
        .industrial-page-header .industrial-page-title::before {
            width: 170px;
            height: 65px;
        }
    }


    /* =====SMALL MOBILE================ */
    @media (max-width: 480px) {
        .industrial-page-header {
            padding: 15px 12px 19px;
        }

        .industrial-page-header .industrial-breadcrumb .breadcrumb-list {
            gap: 5px;
        }

        .industrial-page-header .industrial-page-title {
            gap: 7px;
        }

        .industrial-page-header .industrial-page-title .title-h1 {
            font-size: 22px;
        }

        .industrial-page-header .industrial-page-title .title-line {
            width: 20px;
        }
    }


    /* ============REDUCED MOTION============ */
    @media (prefers-reduced-motion: reduce) {

        .industrial-page-header::before,
        .industrial-page-header::after,
        .industrial-page-header .industrial-page-title::before,
        .industrial-page-header .industrial-page-title .title-line::after {
            animation: none !important;
        }
    }

    /* =============== INDUSTRIAL PRODUCT SLIDER [primary-product.blade.php]======== */
    .industrial-product-slider-section {
        position: relative;
        width: 100%;
        margin-top: 30px;
        margin-bottom: 6%;
        overflow: hidden;
    }

    /* ===================== SECTION HEADING============ */
    .industrial-product-slider-section .industrial-slider-heading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 18px;
    }

    .industrial-product-slider-section .industrial-slider-heading .title-h2 {
        margin: 0;
        color: #1d2733;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
    }

    .industrial-product-slider-section .industrial-slider-heading .heading-line {
        width: 38px;
        height: 3px;
        flex-shrink: 0;
        border-radius: 20px;
        background: #0096ff;
    }

    /* ================ SLIDER========== */
    .industrial-product-slider-section .industrial-slider {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin: 8px 0;
        padding: 3px 0;
    }

    /* ==============SLIDER FADE EDGES================ */
    .industrial-product-slider-section .industrial-slider::before,
    .industrial-product-slider-section .industrial-slider::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 70px;
        z-index: 3;
        pointer-events: none;
    }

    .industrial-product-slider-section .industrial-slider::before {
        left: 0;
        background: linear-gradient(to right, #ffffff, transparent);
    }

    .industrial-product-slider-section .industrial-slider::after {
        right: 0;
        background: linear-gradient(to left, #ffffff, transparent);
    }

    /* ============== SLIDER TRACK============= */

    .industrial-product-slider-section .industrial-slider .industrial-slider-track {
        display: flex;
        align-items: center;
        width: max-content;
        gap: 12px;
        will-change: transform;
    }

    /* =========== RIGHT → LEFT ===== */
    .industrial-product-slider-section .slider-rtl .industrial-slider-track {
        animation: industrialSlideRTL 35s linear infinite;
    }

    /* ========= LEFT → RIGHT========= */

    .industrial-product-slider-section .slider-ltr .industrial-slider-track {
        animation: industrialSlideLTR 35s linear infinite;
    }

    /* ======================= PRODUCT ITEM========== */
    .industrial-product-slider-section .industrial-slider .industrial-slider-track .industrial-product-item {
        position: relative;
        display: inline-flex;
        align-items: center;
        min-width: 175px;
        height: 48px;
        padding: 5px 11px 5px 6px;
        gap: 8px;
        flex-shrink: 0;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 30px;
        background: linear-gradient(135deg, #ffffff, #f7fafc);
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);
        text-decoration: none;
        transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }

    /* =========== PRODUCT IMAGE=========== */
    .industrial-product-slider-section .industrial-product-item .industrial-product-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 37px;
        height: 37px;
        flex: 0 0 37px;
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid rgb(0 36 61);
        background: #ffffff;
    }

    .industrial-product-slider-section .industrial-product-item .industrial-product-image img {
        display: block;
        width: 37px;
        height: 37px;
        border-radius: 50%;
        padding: 2px;
        transition: transform 0.3s ease;
    }

    /* ============ PRODUCT NAME======== */
    .industrial-product-slider-section .industrial-product-item .industrial-product-name {
        display: block;
        max-width: 125px;
        overflow: hidden;
        color: #26323d;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        text-overflow: ellipsis;
        transition: color 0.25s ease;
    }

    /* ================== PRODUCT ARROW============= */
    .industrial-product-slider-section .industrial-product-item .industrial-product-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin-left: auto;
        flex: 0 0 18px;
        border-radius: 50%;
        color: #ffffff;
        background: #0096ff;
        font-size: 8px;
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    /* =============PRODUCT HOVER============ */
    .industrial-product-slider-section .industrial-product-item:hover {
        transform: translateY(-3px);
        border-color: rgba(0, 150, 255, 0.45);
        background: #ffffff;
        box-shadow: 0 6px 18px rgba(0, 150, 255, 0.13);
    }

    /* Image hover */
    .industrial-product-slider-section .industrial-product-item:hover .industrial-product-image img {
        transform: scale(1.12);
    }

    /* Product name hover */
    .industrial-product-slider-section .industrial-product-item:hover .industrial-product-name {
        color: #0096ff;
    }

    /* Arrow hover */
    .industrial-product-slider-section .industrial-product-item:hover .industrial-product-arrow {
        opacity: 1;
        transform: translateX(0);
    }

    /* ====== PAUSE SLIDER ON HOVER================= */
    .industrial-product-slider-section .industrial-slider:hover .industrial-slider-track {
        animation-play-state: paused;
    }

    /* ======  ANIMATIONS=============== */
    @keyframes industrialSlideRTL {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    @keyframes industrialSlideLTR {
        0% {
            transform: translateX(-50%);
        }

        100% {
            transform: translateX(0);
        }
    }

    /* ========= MOBILE================== */
    @media (max-width: 767px) {
        .industrial-product-slider-section {
            margin-top: 20px;
            padding: 5px 0 12px;
        }

        /* Heading */
        .industrial-product-slider-section .industrial-slider-heading {
            gap: 9px;
            margin-bottom: 14px;
        }

        .industrial-product-slider-section .industrial-slider-heading .title-h2 {
            font-size: 19px;
        }

        .industrial-product-slider-section .industrial-slider-heading .heading-line {
            width: 25px;
            height: 2px;
        }

        /* Slider */
        .industrial-product-slider-section .industrial-slider {
            margin: 5px 0;
        }

        /* Fade */
        .industrial-product-slider-section .industrial-slider::before,
        .industrial-product-slider-section .industrial-slider::after {
            width: 35px;
        }

        /* Product */
        .industrial-product-slider-section .industrial-product-item {
            min-width: 150px;
            height: 44px;
            padding: 4px 9px 4px 5px;
            gap: 7px;
        }

        /* Image */
        .industrial-product-slider-section .industrial-product-item .industrial-product-image {
            width: 34px;
            height: 34px;
            flex-basis: 34px;
        }

        /* Name */
        .industrial-product-slider-section .industrial-product-item .industrial-product-name {
            max-width: 105px;
            font-size: 11px;
        }
    }

    /* =========== ACCESSIBILITY=========== */
    @media (prefers-reduced-motion: reduce) {
        .industrial-product-slider-section .industrial-slider-track {
            animation: none !important;
        }
    }

    /* ============================================================
   INDUSTRIAL SUPPLIER FILTER
   ALL STYLES ARE SCOPED TO: 
============================================================ */


    /* ====== SECTION HEADING====== */
    .industrial-supplier-filter .supplier-section-heading {
        margin-bottom: 14px;
    }

    .industrial-supplier-filter .supplier-section-heading .title-h2 {
        margin-bottom: 0;
        font-weight: 700;
    }

    /* ============================================================
   SUPPLIER RESULT COUNT
   Scoped only to Industrial Supplier Filter
============================================================ */

    .industrial-supplier-filter .supplier-result-info {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        margin: 0 0 12px;
        padding: 0 2px;
        font-size: 13px;
        line-height: 1.4;
        color: #6b7280;
    }

    .industrial-supplier-filter .supplier-result-info span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .industrial-supplier-filter .supplier-result-info strong {
        color: #1f2937;
        font-size: 14px;
        font-weight: 700;
    }

    .industrial-supplier-filter .supplier-result-info::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 16px;
        margin-right: 7px;
        border-radius: 2px;
        background: #0d6efd;
    }

    /* =========MAIN FILTER BAR================== */
    .industrial-supplier-filter .supplier-filter-bar {
        width: 100%;
        background: #ffffff;
        border: 1px solid #e1e5e9;
        border-radius: 10px;
        padding: 14px 16px;
        margin-bottom: 15px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    }

    /* ============FILTER FORM===================== */
    .industrial-supplier-filter .supplier-filter-form {
        width: 100%;
        display: flex;
        align-items: flex-end;
        gap: 12px;
        flex-wrap: nowrap;
    }

    /* =================FILTER ITEM================== */
    .industrial-supplier-filter .supplier-filter-item {
        flex: 1 1 0;
        min-width: 0;
    }

    /* ===========FILTER LABEL======================== */
    .industrial-supplier-filter .supplier-filter-item label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #333333;
        margin-bottom: 6px;
        white-space: nowrap;
    }

    .industrial-supplier-filter .supplier-filter-item label i {
        margin-right: 5px;
        font-size: 12px;
    }

    /* =============SELECT==================== */
    .industrial-supplier-filter .supplier-filter-select {
        width: 100%;
        height: 40px;
        border: 1px solid #d9dee3;
        border-radius: 6px;
        background: #ffffff;
        padding: 0 10px;
        font-size: 13px;
        color: #333333;
        outline: none;
        transition: border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .industrial-supplier-filter .supplier-filter-select:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.08);
    }


    /* ===============MULTIPLE CITY SELECT================= */
    .industrial-supplier-filter .supplier-filter-select[multiple] {
        height: 40px;
        overflow: hidden;
    }

    /* ===============RANGE INPUT WRAPPER================ */
    .industrial-supplier-filter .supplier-range-inputs {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .industrial-supplier-filter .supplier-range-inputs>span {
        flex: 0 0 auto;
        color: #888888;
        font-size: 12px;
    }

    /* ============NUMBER INPUT==================== */
    .industrial-supplier-filter .supplier-filter-input {
        width: 100%;
        min-width: 65px;
        height: 40px;
        border: 1px solid #d9dee3;
        border-radius: 6px;
        padding: 0 9px;
        background: #ffffff;
        font-size: 13px;
        color: #333333;
        outline: none;
        transition: border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    .industrial-supplier-filter .supplier-filter-input:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.08);
    }


    /* ===========REMOVE NUMBER SPINNER==================== */
    .industrial-supplier-filter .supplier-filter-input::-webkit-outer-spin-button,
    .industrial-supplier-filter .supplier-filter-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .industrial-supplier-filter .supplier-filter-input[type="number"] {
        -moz-appearance: textfield;
    }

    /* ==============FILTER ACTIONS===================== */
    .industrial-supplier-filter .supplier-filter-actions {
        display: flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
    }

    /* ==============APPLY BUTTON========================= */
    .industrial-supplier-filter .supplier-apply-filter {
        height: 40px;
        padding: 0 17px;
        border: 0;
        border-radius: 6px;
        background: #0d6efd;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.2s ease,
            transform 0.2s ease;
    }

    .industrial-supplier-filter .supplier-apply-filter:hover {
        background: #0959c7;
        transform: translateY(-1px);
    }

    .industrial-supplier-filter .supplier-apply-filter i {
        margin-right: 4px;
    }

    /* ==============CLEAR BUTTON========================= */
    .industrial-supplier-filter .supplier-clear-filter {
        height: 40px;
        padding: 0 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d9dee3;
        border-radius: 6px;
        background: #ffffff;
        color: #555555;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s ease,
            border-color 0.2s ease,
            background 0.2s ease;
    }

    .industrial-supplier-filter .supplier-clear-filter:hover {
        color: #dc3545;
        border-color: #dc3545;
        background: #ffffff;
    }


    /* ============ACTIVE FILTER SUMMARY=================== */
    .industrial-supplier-filter .active-supplier-filters {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
        padding: 9px 12px;
        margin-bottom: 13px;
        border-left: 3px solid #0d6efd;
        border-radius: 5px;
        background: #f7f9fb;
    }


    /* ============ACTIVE FILTER LABEL====================== */
    .industrial-supplier-filter .active-filter-label {
        font-size: 12px;
        font-weight: 700;
        color: #444444;
    }


    /* ===========ACTIVE FILTER TAG======================== */
    .industrial-supplier-filter .active-filter-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 9px;
        border: 1px solid #dce2e7;
        border-radius: 20px;
        background: #ffffff;
        color: #444444;
        font-size: 11px;
        font-weight: 600;
    }

    /* =============RESULT COUNT======================== */
    .industrial-supplier-filter .supplier-result-info {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
        color: #777777;
        font-size: 12px;
    }

    .industrial-supplier-filter .supplier-result-info strong {
        color: #222222;
    }

    /* ===========NO RESULT============================== */
    .industrial-supplier-filter .no-supplier-result {
        text-align: center;
        padding: 50px 20px;
        border: 1px dashed #d8dde2;
        border-radius: 10px;
        background: #fafbfc;
    }

    .industrial-supplier-filter .no-supplier-result>i {
        display: block;
        font-size: 36px;
        color: #999999;
        margin-bottom: 12px;
    }

    .industrial-supplier-filter .no-supplier-result h3 {
        margin-bottom: 7px;
        font-size: 20px;
        font-weight: 700;
    }

    .industrial-supplier-filter .no-supplier-result p {
        margin-bottom: 15px;
        color: #777777;
    }


    /* =============TABLET=============================== */
    @media (max-width: 1199px) {

        .industrial-supplier-filter .supplier-filter-form {
            flex-wrap: wrap;
        }


        .industrial-supplier-filter .supplier-filter-item {
            flex: 1 1 calc(33.333% - 12px);
        }


        .industrial-supplier-filter .supplier-filter-actions {
            flex: 1 1 100%;
        }

    }

    /* ==============MOBILE=============================== */
    @media (max-width: 767px) {
        .industrial-supplier-filter .supplier-filter-bar {
            padding: 12px;
        }

        .industrial-supplier-filter .supplier-filter-form {
            display: grid;
            grid-template-columns: 1fr;
            gap: 11px;
        }

        .industrial-supplier-filter .supplier-filter-item {
            width: 100%;
        }

        .industrial-supplier-filter .supplier-filter-actions {
            width: 100%;
            display: flex;
        }

        .industrial-supplier-filter .supplier-apply-filter,
        .industrial-supplier-filter .supplier-clear-filter {
            flex: 1;
        }

        .industrial-supplier-filter .active-supplier-filters {
            align-items: flex-start;
            flex-direction: column;
        }

    }

    /* ==============Side Bar================= */
    .suppliers .primary-products{
        margin-top: 65px !important;
    }