.elementor-29 .elementor-element.elementor-element-8be5038{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-2137f48{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-7f802ab{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E3DCDE;--border-color:#E3DCDE;--border-radius:30px 30px 30px 30px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:25px;--padding-bottom:25px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-7f802ab:not(.elementor-motion-effects-element-type-background), .elementor-29 .elementor-element.elementor-element-7f802ab > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5DEFF;}.elementor-29 .elementor-element.elementor-element-9866910{--display:grid;--e-con-grid-template-columns:repeat(5, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--align-items:center;}.elementor-widget-counter .elementor-counter-number-wrapper{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-counter .elementor-counter-title{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-29 .elementor-element.elementor-element-aa7d733{border-style:solid;border-width:0px 1px 0px 0px;border-color:#E3DCDE;}.elementor-29 .elementor-element.elementor-element-aa7d733 .elementor-counter-number-wrapper{color:#000000;font-family:"Roboto Slab", Sans-serif;font-size:41px;font-weight:600;}.elementor-29 .elementor-element.elementor-element-aa7d733 .elementor-counter-title{color:#000000;font-family:"Roboto Slab", Sans-serif;font-weight:400;}.elementor-29 .elementor-element.elementor-element-29b2658{border-style:solid;border-width:0px 1px 0px 0px;border-color:#E3DCDE;}.elementor-29 .elementor-element.elementor-element-29b2658 .elementor-counter-number-wrapper{color:#000000;font-family:"Roboto Slab", Sans-serif;font-size:41px;font-weight:600;}.elementor-29 .elementor-element.elementor-element-29b2658 .elementor-counter-title{color:#000000;font-family:"Roboto Slab", Sans-serif;font-weight:400;}.elementor-29 .elementor-element.elementor-element-be4cf36{border-style:solid;border-width:0px 1px 0px 0px;border-color:#E3DCDE;}.elementor-29 .elementor-element.elementor-element-be4cf36 .elementor-counter-number-wrapper{color:#000000;font-family:"Roboto Slab", Sans-serif;font-size:41px;font-weight:600;}.elementor-29 .elementor-element.elementor-element-be4cf36 .elementor-counter-title{color:#000000;font-family:"Roboto Slab", Sans-serif;font-weight:400;}.elementor-29 .elementor-element.elementor-element-836d703{border-style:solid;border-width:0px 1px 0px 0px;border-color:#E3DCDE;}.elementor-29 .elementor-element.elementor-element-836d703 .elementor-counter-number-wrapper{color:#000000;font-family:"Roboto Slab", Sans-serif;font-size:41px;font-weight:600;}.elementor-29 .elementor-element.elementor-element-836d703 .elementor-counter-title{color:#000000;font-family:"Roboto Slab", Sans-serif;font-weight:400;}.elementor-29 .elementor-element.elementor-element-4f8048b{border-style:solid;border-width:0px 1px 0px 0px;border-color:#E3DCDE;}.elementor-29 .elementor-element.elementor-element-4f8048b .elementor-counter-number-wrapper{color:#000000;font-family:"Roboto Slab", Sans-serif;font-size:41px;font-weight:600;}.elementor-29 .elementor-element.elementor-element-4f8048b .elementor-counter-title{color:#000000;font-family:"Roboto Slab", Sans-serif;font-weight:400;}.elementor-29 .elementor-element.elementor-element-5a50361{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:60px;--padding-bottom:60px;--padding-left:10px;--padding-right:10px;}.elementor-29 .elementor-element.elementor-element-6465c0d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-6465c0d.e-con{--align-self:flex-start;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-29 .elementor-element.elementor-element-2422e39 .elementor-button{background-color:#FFFFFF;font-family:"Roboto Slab", Sans-serif;font-weight:500;fill:#4F7EFF;color:#4F7EFF;border-style:solid;border-width:1px 1px 1px 1px;border-radius:30px 30px 30px 30px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-29 .elementor-element.elementor-element-750bf72 .elementor-heading-title{font-family:"Roboto Slab", Sans-serif;font-size:60px;font-weight:500;color:#000000;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-29 .elementor-element.elementor-element-8b404fe.elementor-element{--align-self:center;}.elementor-29 .elementor-element.elementor-element-8b404fe{font-family:"Roboto Slab", Sans-serif;font-size:15px;font-weight:400;}.elementor-29 .elementor-element.elementor-element-3efd168{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-29 .elementor-element.elementor-element-3a75f25{--display:flex;}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products{--products-title-color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.products-heading-show .related-products > h2, .elementor-widget-woocommerce-products.products-heading-show .upsells > h2, .elementor-widget-woocommerce-products.products-heading-show .cross-sells > h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-primary );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price del {font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-woocommerce-products.elementor-wc-products .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-29 .elementor-element.elementor-element-cb9b29b.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-cb9b29b.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-cb9b29b.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-cb9b29b.elementor-wc-products ul.products li.product .star-rating{color:#FFBB42;}.elementor-29 .elementor-element.elementor-element-cb9b29b.elementor-wc-products ul.products li.product .price{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-cb9b29b.elementor-wc-products ul.products li.product .price ins{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-cb9b29b.elementor-wc-products ul.products li.product .price ins .amount{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-cb9b29b.elementor-wc-products ul.products li.product .price del{color:#000000;}.elementor-29 .elementor-element.elementor-element-cb9b29b.elementor-wc-products ul.products li.product .price del .amount{color:#000000;}.elementor-29 .elementor-element.elementor-element-280378e{--display:flex;}.elementor-29 .elementor-element.elementor-element-04d6db3.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-04d6db3.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-04d6db3.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-04d6db3.elementor-wc-products ul.products li.product .star-rating{color:#EC9B0B;}.elementor-29 .elementor-element.elementor-element-04d6db3.elementor-wc-products ul.products li.product .price{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-04d6db3.elementor-wc-products ul.products li.product .price ins{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-04d6db3.elementor-wc-products ul.products li.product .price ins .amount{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-04d6db3.elementor-wc-products ul.products li.product .price del{color:#000000;}.elementor-29 .elementor-element.elementor-element-04d6db3.elementor-wc-products ul.products li.product .price del .amount{color:#000000;}.elementor-29 .elementor-element.elementor-element-bb53886{--display:flex;}.elementor-29 .elementor-element.elementor-element-3d9653f.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-3d9653f.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-3d9653f.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-3d9653f.elementor-wc-products ul.products li.product .star-rating{color:#EC9B0B;}.elementor-29 .elementor-element.elementor-element-3d9653f.elementor-wc-products ul.products li.product .price{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-3d9653f.elementor-wc-products ul.products li.product .price ins{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-3d9653f.elementor-wc-products ul.products li.product .price ins .amount{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-3d9653f.elementor-wc-products ul.products li.product .price del{color:#000000;}.elementor-29 .elementor-element.elementor-element-3d9653f.elementor-wc-products ul.products li.product .price del .amount{color:#000000;}.elementor-29 .elementor-element.elementor-element-d82a64c{--display:flex;}.elementor-29 .elementor-element.elementor-element-0dc5c21.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-0dc5c21.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-0dc5c21.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-0dc5c21.elementor-wc-products ul.products li.product .star-rating{color:#EC9B0B;}.elementor-29 .elementor-element.elementor-element-0dc5c21.elementor-wc-products ul.products li.product .price{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-0dc5c21.elementor-wc-products ul.products li.product .price ins{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-0dc5c21.elementor-wc-products ul.products li.product .price ins .amount{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-0dc5c21.elementor-wc-products ul.products li.product .price del{color:#000000;}.elementor-29 .elementor-element.elementor-element-0dc5c21.elementor-wc-products ul.products li.product .price del .amount{color:#000000;}.elementor-29 .elementor-element.elementor-element-df41673{--display:flex;}.elementor-29 .elementor-element.elementor-element-2905b8a.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-2905b8a.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-2905b8a.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-2905b8a.elementor-wc-products ul.products li.product .star-rating{color:#EC9B0B;}.elementor-29 .elementor-element.elementor-element-2905b8a.elementor-wc-products ul.products li.product .price{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-2905b8a.elementor-wc-products ul.products li.product .price ins{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-2905b8a.elementor-wc-products ul.products li.product .price ins .amount{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-2905b8a.elementor-wc-products ul.products li.product .price del{color:#000000;}.elementor-29 .elementor-element.elementor-element-2905b8a.elementor-wc-products ul.products li.product .price del .amount{color:#000000;}.elementor-29 .elementor-element.elementor-element-e5147c4{--display:flex;}.elementor-29 .elementor-element.elementor-element-bbe6b25.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-bbe6b25.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-bbe6b25.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-bbe6b25.elementor-wc-products ul.products li.product .star-rating{color:#EC9B0B;}.elementor-29 .elementor-element.elementor-element-bbe6b25.elementor-wc-products ul.products li.product .price{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-bbe6b25.elementor-wc-products ul.products li.product .price ins{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-bbe6b25.elementor-wc-products ul.products li.product .price ins .amount{color:#3B82F6;}.elementor-29 .elementor-element.elementor-element-bbe6b25.elementor-wc-products ul.products li.product .price del{color:#000000;}.elementor-29 .elementor-element.elementor-element-bbe6b25.elementor-wc-products ul.products li.product .price del .amount{color:#000000;}.elementor-29 .elementor-element.elementor-element-8a46635{--n-tabs-heading-justify-content:flex-start;--n-tabs-title-width:initial;--n-tabs-title-height:initial;--n-tabs-title-align-items:center;--n-tabs-title-flex-grow:0;--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;--n-tabs-title-gap:10px;--n-tabs-title-border-radius:30px 30px 30px 30px;--n-tabs-title-padding-top:15px;--n-tabs-title-padding-right:20px;--n-tabs-title-padding-bottom:15px;--n-tabs-title-padding-left:20px;--n-tabs-title-font-size:15px;--n-tabs-title-color:#4473F8;--n-tabs-title-color-active:#FFFFFF;}.elementor-29 .elementor-element.elementor-element-8a46635 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-29 .elementor-element.elementor-element-8a46635.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#4473F8;}.elementor-29 .elementor-element.elementor-element-8a46635.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-29 .elementor-element.elementor-element-8a46635.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:#4473F8;}.elementor-29 .elementor-element.elementor-element-8a46635.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"Roboto", Sans-serif;font-weight:500;}.elementor-29 .elementor-element.elementor-element-8a46635 [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#FFFFFF;}.elementor-29 .elementor-element.elementor-element-9f77f16{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-ae899de{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:30px 30px 30px 30px;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-29 .elementor-element.elementor-element-45d72c1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-a1bc3b9{--display:flex;--min-height:186px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#D3D3D3;--border-color:#D3D3D3;--border-radius:25px 25px 0px 0px;}.elementor-29 .elementor-element.elementor-element-e6be744{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-efb7ed8 .elementor-button{background-color:#FFFFFF;font-family:"Roboto Slab", Sans-serif;font-weight:500;fill:#4F7EFF;color:#4F7EFF;border-style:solid;border-width:1px 1px 1px 1px;border-radius:30px 30px 30px 30px;}.elementor-29 .elementor-element.elementor-element-e50ae34 .elementor-heading-title{font-family:"Roboto Slab", Sans-serif;font-weight:600;color:#000000;}.elementor-29 .elementor-element.elementor-element-9c4d62d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:0px 0px 0px 1px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:1px;border-color:#D3D3D3;--border-color:#D3D3D3;}.elementor-29 .elementor-element.elementor-element-830088e{padding:10px 10px 10px 10px;border-style:solid;border-width:0px 0px 0px 5px;border-color:#3C83F6;border-radius:10px 10px 10px 10px;text-align:start;font-family:"Roboto Slab", Sans-serif;font-size:20px;font-weight:600;color:#0D0D0D;}.elementor-29 .elementor-element.elementor-element-512b86e .elementor-button{background-color:#000000;font-family:"Roboto Slab", Sans-serif;font-weight:500;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:0px 10px 0px 0px;border-color:#3C83F6;border-radius:10px 10px 10px 10px;}.elementor-29 .elementor-element.elementor-element-512b86e .elementor-button:hover, .elementor-29 .elementor-element.elementor-element-512b86e .elementor-button:focus{background-color:#3C83F6;color:#FFFFFF;}.elementor-29 .elementor-element.elementor-element-512b86e .elementor-button:hover svg, .elementor-29 .elementor-element.elementor-element-512b86e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-29 .elementor-element.elementor-element-08b5877{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 1px 1px 1px;--border-top-width:0px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#D4D4D4;--border-color:#D4D4D4;--border-radius:0px 0px 25px 25px;}.elementor-29 .elementor-element.elementor-element-7f1af5f{--display:flex;border-style:solid;--border-style:solid;border-width:0px 1px 0px 0px;--border-top-width:0px;--border-right-width:1px;--border-bottom-width:0px;--border-left-width:0px;border-color:#D4D4D4;--border-color:#D4D4D4;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-29 .elementor-element.elementor-element-ea0ca39 .elementor-icon-box-wrapper{gap:0px;}.elementor-29 .elementor-element.elementor-element-ea0ca39 .elementor-icon-box-title{margin-block-end:0px;color:#263161;}.elementor-29 .elementor-element.elementor-element-ea0ca39 .elementor-icon{font-size:187px;}.elementor-29 .elementor-element.elementor-element-ea0ca39 .elementor-icon-box-title, .elementor-29 .elementor-element.elementor-element-ea0ca39 .elementor-icon-box-title a{font-family:"Roboto Slab", Sans-serif;font-weight:600;}.elementor-29 .elementor-element.elementor-element-ea0ca39:has(:hover) .elementor-icon-box-title, .elementor-29 .elementor-element.elementor-element-ea0ca39:has(:focus) .elementor-icon-box-title{color:#4F7EFF;}.elementor-29 .elementor-element.elementor-element-bd017e1{--display:flex;border-style:solid;--border-style:solid;border-width:0px 1px 0px 0px;--border-top-width:0px;--border-right-width:1px;--border-bottom-width:0px;--border-left-width:0px;border-color:#D4D4D4;--border-color:#D4D4D4;}.elementor-29 .elementor-element.elementor-element-3b34b97 .elementor-icon-box-wrapper{gap:0px;}.elementor-29 .elementor-element.elementor-element-3b34b97 .elementor-icon{font-size:187px;}.elementor-29 .elementor-element.elementor-element-3b34b97 .elementor-icon-box-title, .elementor-29 .elementor-element.elementor-element-3b34b97 .elementor-icon-box-title a{font-family:"Roboto Slab", Sans-serif;font-weight:600;}.elementor-29 .elementor-element.elementor-element-3b34b97 .elementor-icon-box-title{color:#263161;}.elementor-29 .elementor-element.elementor-element-3b34b97:has(:hover) .elementor-icon-box-title, .elementor-29 .elementor-element.elementor-element-3b34b97:has(:focus) .elementor-icon-box-title{color:#4F7EFF;}.elementor-29 .elementor-element.elementor-element-bc34d6c{--display:flex;border-style:solid;--border-style:solid;border-width:0px 1px 0px 0px;--border-top-width:0px;--border-right-width:1px;--border-bottom-width:0px;--border-left-width:0px;border-color:#D4D4D4;--border-color:#D4D4D4;}.elementor-29 .elementor-element.elementor-element-1a810bc .elementor-icon-box-wrapper{gap:0px;}.elementor-29 .elementor-element.elementor-element-1a810bc .elementor-icon{font-size:187px;}.elementor-29 .elementor-element.elementor-element-1a810bc .elementor-icon-box-title, .elementor-29 .elementor-element.elementor-element-1a810bc .elementor-icon-box-title a{font-family:"Roboto Slab", Sans-serif;font-weight:600;}.elementor-29 .elementor-element.elementor-element-1a810bc .elementor-icon-box-title{color:#263161;}.elementor-29 .elementor-element.elementor-element-1a810bc:has(:hover) .elementor-icon-box-title, .elementor-29 .elementor-element.elementor-element-1a810bc:has(:focus) .elementor-icon-box-title{color:#4F7EFF;}.elementor-29 .elementor-element.elementor-element-2f137cc{--display:flex;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#D4D4D4;--border-color:#D4D4D4;}.elementor-29 .elementor-element.elementor-element-ff5f544 .elementor-icon-box-wrapper{gap:0px;}.elementor-29 .elementor-element.elementor-element-ff5f544 .elementor-icon{font-size:187px;}.elementor-29 .elementor-element.elementor-element-ff5f544 .elementor-icon-box-title, .elementor-29 .elementor-element.elementor-element-ff5f544 .elementor-icon-box-title a{font-family:"Roboto Slab", Sans-serif;font-weight:600;}.elementor-29 .elementor-element.elementor-element-ff5f544 .elementor-icon-box-title{color:#263161;}.elementor-29 .elementor-element.elementor-element-ff5f544:has(:hover) .elementor-icon-box-title, .elementor-29 .elementor-element.elementor-element-ff5f544:has(:focus) .elementor-icon-box-title{color:#4F7EFF;}.elementor-29 .elementor-element.elementor-element-6a8ae15{--display:flex;}.elementor-29 .elementor-element.elementor-element-acccd5e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-0412193{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-1131b2a{--display:flex;--min-height:100px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;--border-radius:20px 20px 20px 20px;--padding-top:30px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-1131b2a:not(.elementor-motion-effects-element-type-background), .elementor-29 .elementor-element.elementor-element-1131b2a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://jisulife.com.pk/wp-content/uploads/2026/05/unnamed-1-e1778309132389.png");background-repeat:no-repeat;background-size:cover;}.elementor-29 .elementor-element.elementor-element-1131b2a::before, .elementor-29 .elementor-element.elementor-element-1131b2a > .elementor-background-video-container::before, .elementor-29 .elementor-element.elementor-element-1131b2a > .e-con-inner > .elementor-background-video-container::before, .elementor-29 .elementor-element.elementor-element-1131b2a > .elementor-background-slideshow::before, .elementor-29 .elementor-element.elementor-element-1131b2a > .e-con-inner > .elementor-background-slideshow::before, .elementor-29 .elementor-element.elementor-element-1131b2a > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0000007D;--background-overlay:'';}.elementor-29 .elementor-element.elementor-element-7122e3c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-1d2ed08{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-29 .elementor-element.elementor-element-98bdd86{padding:20px 0px 0px 0px;}.elementor-29 .elementor-element.elementor-element-98bdd86 .elementor-heading-title{font-family:"Roboto Slab", Sans-serif;font-weight:600;color:#FFFFFF;}.elementor-29 .elementor-element.elementor-element-a883ebf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#D3D3D3;--border-color:#D3D3D3;--border-radius:30px 30px 30px 30px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-29 .elementor-element.elementor-element-a883ebf:not(.elementor-motion-effects-element-type-background), .elementor-29 .elementor-element.elementor-element-a883ebf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F7F7;}.elementor-29 .elementor-element.elementor-element-b69835d .elementor-button{background-color:#FFFFFF;font-family:"Roboto Slab", Sans-serif;font-weight:500;fill:#4F7EFF;color:#4F7EFF;border-style:solid;border-width:1px 1px 1px 1px;border-radius:30px 30px 30px 30px;}.elementor-29 .elementor-element.elementor-element-9072991{text-align:center;}.elementor-29 .elementor-element.elementor-element-9072991 .elementor-heading-title{font-family:"Roboto Slab", Sans-serif;font-size:50px;font-weight:600;color:#000000;}.elementor-29 .elementor-element.elementor-element-6d0e424{--display:grid;--e-con-grid-template-columns:repeat(6, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-29 .elementor-element.elementor-element-9866910{--grid-auto-flow:row;}.elementor-29 .elementor-element.elementor-element-cb9b29b.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-04d6db3.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-3d9653f.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-0dc5c21.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-2905b8a.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-bbe6b25.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-9072991 .elementor-heading-title{font-size:28px;}.elementor-29 .elementor-element.elementor-element-6d0e424{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-29 .elementor-element.elementor-element-2137f48{--content-width:1310px;}.elementor-29 .elementor-element.elementor-element-5a50361{--content-width:1200px;}.elementor-29 .elementor-element.elementor-element-6465c0d{--width:41%;}.elementor-29 .elementor-element.elementor-element-3efd168{--width:100%;}.elementor-29 .elementor-element.elementor-element-a1bc3b9{--width:98%;}.elementor-29 .elementor-element.elementor-element-e6be744{--width:60%;}.elementor-29 .elementor-element.elementor-element-9c4d62d{--width:50%;}.elementor-29 .elementor-element.elementor-element-08b5877{--width:100%;}.elementor-29 .elementor-element.elementor-element-7f1af5f{--width:25%;}.elementor-29 .elementor-element.elementor-element-bd017e1{--width:25%;}.elementor-29 .elementor-element.elementor-element-bc34d6c{--width:25%;}.elementor-29 .elementor-element.elementor-element-2f137cc{--width:25%;}.elementor-29 .elementor-element.elementor-element-7122e3c{--width:66.6666%;}.elementor-29 .elementor-element.elementor-element-1d2ed08{--width:33.3333%;}}@media(max-width:767px){.elementor-29 .elementor-element.elementor-element-7f802ab{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-9866910{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-29 .elementor-element.elementor-element-aa7d733 .elementor-counter-number-wrapper{font-size:25px;}.elementor-29 .elementor-element.elementor-element-aa7d733 .elementor-counter-title{font-size:15px;}.elementor-29 .elementor-element.elementor-element-29b2658 .elementor-counter-number-wrapper{font-size:25px;}.elementor-29 .elementor-element.elementor-element-29b2658 .elementor-counter-title{font-size:15px;}.elementor-29 .elementor-element.elementor-element-be4cf36 .elementor-counter-number-wrapper{font-size:25px;}.elementor-29 .elementor-element.elementor-element-be4cf36 .elementor-counter-title{font-size:15px;}.elementor-29 .elementor-element.elementor-element-836d703 .elementor-counter-number-wrapper{font-size:25px;}.elementor-29 .elementor-element.elementor-element-836d703 .elementor-counter-title{font-size:15px;}.elementor-29 .elementor-element.elementor-element-4f8048b .elementor-counter-number-wrapper{font-size:25px;}.elementor-29 .elementor-element.elementor-element-4f8048b .elementor-counter-title{font-size:15px;}.elementor-29 .elementor-element.elementor-element-750bf72.elementor-element{--align-self:center;}.elementor-29 .elementor-element.elementor-element-750bf72{text-align:center;}.elementor-29 .elementor-element.elementor-element-750bf72 .elementor-heading-title{font-size:35px;}.elementor-29 .elementor-element.elementor-element-cb9b29b.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-04d6db3.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-3d9653f.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-0dc5c21.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-2905b8a.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-bbe6b25.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-29 .elementor-element.elementor-element-8a46635{--n-tabs-heading-justify-content:center;--n-tabs-title-width:initial;--n-tabs-title-height:initial;--n-tabs-title-align-items:center;--n-tabs-title-flex-grow:0;}.elementor-29 .elementor-element.elementor-element-e6be744{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-29 .elementor-element.elementor-element-e50ae34 .elementor-heading-title{font-size:30px;}.elementor-29 .elementor-element.elementor-element-830088e{font-size:15px;}.elementor-29 .elementor-element.elementor-element-1131b2a{--min-height:270px;}.elementor-29 .elementor-element.elementor-element-1131b2a:not(.elementor-motion-effects-element-type-background), .elementor-29 .elementor-element.elementor-element-1131b2a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:-70px 1px;}.elementor-29 .elementor-element.elementor-element-1d2ed08{--justify-content:flex-end;}.elementor-29 .elementor-element.elementor-element-6d0e424{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for heading, class: .elementor-element-750bf72 *//* Container styling */ .elementor-29 .elementor-element.elementor-element-750bf72 { display: block; /* Heading container left hi rahega */ } .elementor-29 .elementor-element.elementor-element-750bf72 .elementor-heading-title { display: inline-block; /* Sirf text ki width lega */ position: relative; padding-bottom: 15px; color: #000; text-align: left; /* Text left hi rahega */ } /* Span (Last Word) ka color */ .elementor-29 .elementor-element.elementor-element-750bf72 .elementor-heading-title span { color: #007bff; } /* Underline jo text ke center mein aayegi */ .elementor-29 .elementor-element.elementor-element-750bf72 .elementor-heading-title::after { content: ""; position: absolute; bottom: 0; left: 50%; /* Text ki width ke 50% pe jayegi */ transform: translateX(-50%); /* Wahan se perfect center hogi */ width: 60px; height: 4px; background-color: #007bff; border-radius: 2px; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-cb9b29b *//* 1. Sale Badge Removal */ ul.products li.product .onsale { } /* 1b. Custom Black Sale Badge - Properly Aligned */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 15px !important; left: 15px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 4px 9px 2px 9px !important; border-radius: 4px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX (Height Reduced, Sleek Buttons) */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 3px 6px !important; } } @media screen and (max-width: 576px){ ul.products li.product .premium-sale-tag { font-size: 11px!important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-04d6db3 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 1b. Custom Black Sale Badge - Compact & Optimized */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 10px !important; left: 10px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 8px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; border-radius: 3px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 2px 6px !important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-3d9653f *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-0dc5c21 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-2905b8a *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-bbe6b25 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-cb9b29b *//* 1. Sale Badge Removal */ ul.products li.product .onsale { } /* 1b. Custom Black Sale Badge - Properly Aligned */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 15px !important; left: 15px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 4px 9px 2px 9px !important; border-radius: 4px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX (Height Reduced, Sleek Buttons) */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 3px 6px !important; } } @media screen and (max-width: 576px){ ul.products li.product .premium-sale-tag { font-size: 11px!important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-04d6db3 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 1b. Custom Black Sale Badge - Compact & Optimized */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 10px !important; left: 10px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 8px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; border-radius: 3px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 2px 6px !important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-3d9653f *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-0dc5c21 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-2905b8a *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-bbe6b25 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-cb9b29b *//* 1. Sale Badge Removal */ ul.products li.product .onsale { } /* 1b. Custom Black Sale Badge - Properly Aligned */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 15px !important; left: 15px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 4px 9px 2px 9px !important; border-radius: 4px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX (Height Reduced, Sleek Buttons) */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 3px 6px !important; } } @media screen and (max-width: 576px){ ul.products li.product .premium-sale-tag { font-size: 11px!important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-04d6db3 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 1b. Custom Black Sale Badge - Compact & Optimized */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 10px !important; left: 10px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 8px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; border-radius: 3px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 2px 6px !important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-3d9653f *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-0dc5c21 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-2905b8a *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-bbe6b25 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-cb9b29b *//* 1. Sale Badge Removal */ ul.products li.product .onsale { } /* 1b. Custom Black Sale Badge - Properly Aligned */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 15px !important; left: 15px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 4px 9px 2px 9px !important; border-radius: 4px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX (Height Reduced, Sleek Buttons) */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 3px 6px !important; } } @media screen and (max-width: 576px){ ul.products li.product .premium-sale-tag { font-size: 11px!important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-04d6db3 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 1b. Custom Black Sale Badge - Compact & Optimized */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 10px !important; left: 10px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 8px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; border-radius: 3px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 2px 6px !important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-3d9653f *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-0dc5c21 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-2905b8a *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-bbe6b25 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-cb9b29b *//* 1. Sale Badge Removal */ ul.products li.product .onsale { } /* 1b. Custom Black Sale Badge - Properly Aligned */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 15px !important; left: 15px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 4px 9px 2px 9px !important; border-radius: 4px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX (Height Reduced, Sleek Buttons) */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 3px 6px !important; } } @media screen and (max-width: 576px){ ul.products li.product .premium-sale-tag { font-size: 11px!important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-04d6db3 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 1b. Custom Black Sale Badge - Compact & Optimized */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 10px !important; left: 10px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 8px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; border-radius: 3px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 2px 6px !important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-3d9653f *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-0dc5c21 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-2905b8a *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-bbe6b25 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-cb9b29b *//* 1. Sale Badge Removal */ ul.products li.product .onsale { } /* 1b. Custom Black Sale Badge - Properly Aligned */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 15px !important; left: 15px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 4px 9px 2px 9px !important; border-radius: 4px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX (Height Reduced, Sleek Buttons) */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 3px 6px !important; } } @media screen and (max-width: 576px){ ul.products li.product .premium-sale-tag { font-size: 11px!important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-04d6db3 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 1b. Custom Black Sale Badge - Compact & Optimized */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 10px !important; left: 10px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 8px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; border-radius: 3px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 2px 6px !important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-3d9653f *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-0dc5c21 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-2905b8a *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-bbe6b25 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-cb9b29b *//* 1. Sale Badge Removal */ ul.products li.product .onsale { } /* 1b. Custom Black Sale Badge - Properly Aligned */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 15px !important; left: 15px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 4px 9px 2px 9px !important; border-radius: 4px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX (Height Reduced, Sleek Buttons) */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 3px 6px !important; } } @media screen and (max-width: 576px){ ul.products li.product .premium-sale-tag { font-size: 11px!important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-04d6db3 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 1b. Custom Black Sale Badge - Compact & Optimized */ ul.products li.product { position: relative !important; } ul.products li.product .premium-sale-tag { position: absolute !important; top: 10px !important; left: 10px !important; background-color: #111111 !important; color: #ffffff !important; font-size: 8px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 2px 6px !important; border-radius: 3px !important; z-index: 99 !important; display: inline-block !important; width: max-content !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; color: #111 !important; } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; margin: 0 auto !important; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; } /* 7. STRICT MOBILE VIEW FIX */ @media only screen and (max-width: 640px) { ul.products { display: block !important; } ul.products li.product { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; padding: 12px 15px 15px 15px !important; border-radius: 12px !important; box-sizing: border-box !important; } ul.products li.product img { height: 120px !important; margin-bottom: 8px !important; } ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-size: 0.95rem !important; margin: 4px 0 !important; min-height: auto !important; } ul.products li.product .price { font-size: 1.05rem !important; margin-bottom: 10px !important; } ul.products li.product .button { width: 75% !important; padding: 7px 4px !important; font-size: 9.5pt !important; font-weight: 700 !important; margin: 0 auto !important; } ul.products li.product .premium-sale-tag { top: 10px !important; left: 10px !important; font-size: 8px !important; padding: 2px 6px !important; } }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-3d9653f *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-0dc5c21 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-2905b8a *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for woocommerce-products, class: .elementor-element-bbe6b25 *//* 1. Sale Badge Removal */ ul.products li.product .onsale { display: none !important; } /* 2. Card Layout & Design */ ul.products li.product { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; padding: 25px 20px !important; background: #ffffff !important; border: 1px solid #eee !important; border-radius: 15px !important; transition: all 0.4s ease !important; text-align: center !important; } ul.products li.product:hover { transform: translateY(-8px) !important; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.1) !important; border-color: #007bff !important; } /* 3. Image Hover Effect */ ul.products li.product img { height: 180px !important; width: auto !important; object-fit: contain !important; margin: 0 auto 15px auto !important; display: block !important; transition: transform 0.5s ease !important; } ul.products li.product:hover img { transform: scale(1.08) !important; /* Halka sa zoom image par */ } /* 4. Product Title Alignment */ ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2 { font-family: 'Roboto Slab', serif !important; font-size: 1.1rem !important; color: #333 !important; margin: 10px 0 !important; min-height: 2.5em !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* 5. Price Style & Hover */ ul.products li.product .price { font-size: 1.2rem !important; font-weight: 700 !important; color: #007bff !important; margin-bottom: 20px !important; display: block !important; transition: transform 0.3s ease, color 0.3s ease !important; } ul.products li.product:hover .price { transform: scale(1.1) !important; /* Price hover par badi hogi */ color: #111 !important; /* Price ka color change hoga */ } /* 6. Your Original Button Style (Fixed) */ ul.products li.product .button { width: 100% !important; background: #007bff !important; color: #ffffff !important; border: 2px solid #007bff !important; padding: 12px 5px !important; font-weight: 700 !important; font-family: 'Roboto Slab', serif !important; cursor: pointer !important; transition: all 0.4s ease !important; display: block !important; text-align: center !important; text-transform: uppercase !important; /* Aapka Original Polygon */ clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%) !important; } ul.products li.product .button:hover { background: #ffffff !important; color: #007bff !important; /* Hover par Polygon flip */ clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%) !important; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important; }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-e50ae34 *//* Container styling */ .elementor-29 .elementor-element.elementor-element-e50ae34 { display: block; /* Heading container left hi rahega */ } .elementor-29 .elementor-element.elementor-element-e50ae34 .elementor-heading-title { display: inline-block; /* Sirf text ki width lega */ position: relative; padding-bottom: 15px; color: #000; text-align: left; /* Text left hi rahega */ } /* Span (Last Word) ka color */ .elementor-29 .elementor-element.elementor-element-e50ae34 .elementor-heading-title span { color: #007bff; } /* Underline jo text ke center mein aayegi */ .elementor-29 .elementor-element.elementor-element-e50ae34 .elementor-heading-title::after { content: ""; position: absolute; bottom: 0; left: 50%; /* Text ki width ke 50% pe jayegi */ transform: translateX(-50%); /* Wahan se perfect center hogi */ width: 60px; height: 4px; background-color: #007bff; border-radius: 2px; }/* End custom CSS */