@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
body,
dl,
ol,
ul,
li,
a,
a:link,
p {
  font-family: var(--font-regular-normal);
  font-weight: 400;
}
.font-medium {
  font-family: var(--font-regular-normal);
  font-weight: 600; /* uses the 600 file */
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--font-regular-normal);
  font-weight: 700; /* or 800 if you want extra-bold */
}
:root {
  --font-body: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-regular-normal: "Poppins";
  --font-family-medium: "Poppins";
  --font-light: "Poppins";
  --font-bold: "Poppins";
  --customfont1: "Poppins";

--accordion-border-color:#dee2e6;

  /*-------------------- Roboto Font Family Start-------------------------*/
  --swiper-navigation-size: 22px !important;
  --swiper-theme-color: #0a0a0a !important;
  --bgcommon: #0d3c5f;
  --downloadrsON: block;
  --floaterbuttons: 0px;

--loginbg: #1a2e49;

  --ColumnPosition:unset;  /*For shift column right use 2 else unset*/

  /* Icon image Start*/
  --iconblack: url(/assets/img/icons-black.png);
  --icongrey:url(/assets/img/icons-grey.png);
  --iconwhite: url(/assets/img/icons-white.png);
  --icontheme: url(/assets/img/icons-blue.png);
  --iconthemefill: url(/assets/img/icons-blue-fill.png);
  --iconthemelightfill: url(/assets/img/icons-white-fill.png);
  --iconcommonblack: url(/assets/img/icons-common-black.png);
  --iconcommonwhite: url(/assets/img/icons-common-white.png);
  --iconcommonblue: url(/assets/img/icons-common-blue.png);
  --iconcolors: url(/assets/img/icons-color.png);

  --darkselectbuttonicon: var(--iconwhite);
  --darkbuttonicon: var(--iconwhite);
  --btnnormalicons: var(--iconblack);
  --btnhovericons: var(--iconwhite);
  --btnthemeicons: var(--icontheme);
  --menualign: center;
  --btnnormaliconscommon: var(--iconcommonwhite);
  --btnnormaliconscommonhover: var(--iconcommonwhite);

  --sidebariconheader: var(--iconblack);
  --icontopheader: var(--iconwhite);
  --iconheaderaccountdropdown: var(--iconblack);
  --iconheader: var(--iconblack);
  --iconheadermenu: var(--icongrey);
  --iconsidebar: var(--iconblack);

  --productdtlplusminus: var(--iconcommonwhite);
  --productdtlplusminushover: var(--iconcommonwhite);
  /* Icon image End*/
  --comparefixbtnbg: #fff;
  --topheaderfontsize: var(--font-size14);
  --topheadercolor: var(--text-white);
  --topheaderhovercolor: var(--text-white);
  /*--------------------------*/
   --menualign: right;
  /*------------- For Plus-Minus var(--iconcommonblack), For Arrow var(--iconblack) Start -------------*/
  --menuiconresponsive: var(--iconcommonblack);
  /*------------- For Plus-Minus var(--iconcommonblack), For Arrow var(--iconblack) End -------------*/
   --menucolorhover: #00467a;

  --discountofftext: "OFF";
  --pddiscountoffbg: linear-gradient(to bottom, #46b44b, #388e3c);
  /*Header UseName Design End*/
  --UsenNameBorder: 1px solid #fff;
  --UsenNameColor: #fff;
  --UsenNameFontSize: 15px;
  --UsenNamePadding: 2px 30px 2px 5px;
  --UsenNameMaxWidth: 152px;
  --UsenNameArrow: var(--iconwhite);
  /*Header UseName Design End*/

  /*FooterBrandOnLeft Start*/
  --FooterABCompanyWidth: 30%;
  --FooterRightDetail: 70%;
  --FooterMenuWidth: 74%;
  --FooterContactNewsletterrow: 25%;
  /*FooterBrandOnLeft End*/

  /*Footer BG, Font Size, Color - Start*/
  --bg-site-footer: #232f3e;
  --bg-row-copyright-footer: #232f3e;
  --iconfooter: var(--iconwhite);
  --footerdesginpadding: 30px 0px 0px;

  --footermiddleTopBorder: 2px solid #ffffff00;
  --footermiddleBottomBorder: 2px solid #ffffff00;
  --footermiddlepadding: 20px 0px 30px;
  --footermiddlemargin: 0px 0 30px;

  --footermenuheadFsize: 16px;
  --footermenuheadFweight: 400;
  --footermenuheadcolor: #fff;
  --footermenuheadmargin: 0px 0px 15px;
  --footermenuheadpadding: 0px 0px 8px;
  --footermenuheadlineheight: 22px;
  --footermenuheadBborder: 1px solid #dcdcdc;

  --footermenuFsize: 14px;
  --footermenuFweight: 400;
  --footermenucolor: #fff;
  --footermenumargin: 0px 0 0px;
  --footermenupadding: 0px 0 8px;
  --footermenulineheight: 22px;

  --footerpragraphFsize: 15px;
  --footerULLIFsize: 15px;
  --footerpragraphcolor: #fff;
  --footerpragraphlineheight: 22px;

  --copyright-footercolor: #fff;
  --copyright-footerpragraphFsize: 14px;
  --copyright-footermenuFsize: 14px;
  --copyright-footerpadding: 22px 0px 22px;

  /*Newsletter BG, Font Size, Color - start*/
  --NewsletterBG: #f5f5f5;
  --NewsletterHeadingFsize: 32px;
  --NewsletterHeadingFweight: 500;
  --NewsletterHeadingColor: #000;
  --NewsletterPragraphFsize: 14px;
  --NewsletterPragraphFweight: 400;
  --NewsletterPragraphColor: #000;
  /*Newsletter BG, Font Size, Color - End*/

  /*Footer BG, Font Size, Color - End*/

  /*Blog List Variable Start*/
  --bloglistfiltersearch: block;
  --bloglisttextopacity: 0;
  --bloglisttextbefore: inline;
  --bloggridlist: 32%;
  --bloglistmainheadsize: 20px;
  --bloglistmainheadweight: 200;
  --bloglistmainheadcolor: #000000;
  --bloglistmainheadborder: 1px dashed #bebebe;
  --bloglistmainheadborderbefore: #ffb700;
  --bloglistmainheadmargin: 0px 0px 15px;
  --bloglisttagsize: 14px;
  --bloglisttagweight: 500;
  --bloglisttagcolor: #333;
  --bloglisttagmargin: 0px 0px 8px;
  --bloglistheadingsize: 18px;
  --bloglistheadingweight: 100;
  --bloglistheadingcolor: #000000;
  --bloglistheadingmargin: 0px 0px 12px;
  --bloglistparagraphsize: 14px;
  --bloglistparagraphweight: 400;
  --bloglistparagraphlineheight: 22px;
  --bloglistparagraphcolor: #323232;
  --bloglistparagraphmargin: 0px 0px 15px;
  --bloglistbtn: inline-block;
  --bloglistbtnfontsize: 14px;
  --bloglistbtnfontweight: 300;
  --bloglistbtnpadding: 0px !important;
  --bloglistbtnbgcolor: none;
  --bloglistbtncolor: #333;
  --bloglistbtnbgcolorhover: none;
  --bloglistbtncolorhover: #003190;
  --bloglistbtnbefore: none;
  --blogcategorylistsize: 16px;
  --blogcategorylistweight: 300;
  --blogcategorylistcolor: #545454;
  --blogcategorylistborder: 1px solid #fff;
  --blogcategorylistsizehover: 16px;
  --blogcategorylistweighthover: 300;
  --blogcategorylistcolorhover: #000000;
  --blogcategorylistborderhover: 1px solid #fff;
  --blogcategorylistpadding: 0px 0px;
  /**/
  --eventcategorylistmargintpbt: 0px 0px 20px;
  --eventlistradiusboximg: 12px;
  --eventlistpadding: 12px;
  /*blog Filter List head+data Start*/
  --bloglistfilteheadrsize: 22px;
  --bloglistfilterheadweight: 500;
  --bloglistfilterheadcolor: #323232;
  --bloglistfilterheadmargin: 10px 0px 0px;
  --bloglistfilterheadpadding: 6px 0px;
  --bloglistfilterheadborder: none;
  /*blog Filter List head+data End*/
  /*Blog List Variable End*/
  /*event List Variable Start*/
  --eventlistfiltersearch: none;
  --eventlisttextopacity: 0;
  --eventlisttextbefore: inline;
  --eventgridlist: 32%;
  --eventlistmainheadsize: 22px;
  --eventlistmainheadweight: 200;
  --eventlistmainheadcolor: #000000;
  --eventlistmainheadborder: 1px dashed #bebebe;
  --eventlistmainheadborderbefore: #0e3c5e;
  --eventlistmainheadmargin: 0px 0px 25px;
  --eventdetailmainheadmargin: 25px 0px 2px;
  --eventlisttagsize: 14px;
  --eventlisttagweight: 500;
  --eventlisttagcolor: #333;
  --eventlisttagmargin: 0px 0px 8px;
  --eventDetailtagmargin: 10px 0px 12px;
  --eventlistheadingsize: 17px;
  --eventlistheadingweight: 100;
  --eventlistheadingcolor: #000000;
  --eventlistheadingmargin: 0px 0px 12px;
  --eventlistparagraphsize: 15px;
  --eventlistparagraphweight: 400;
  --eventlistparagraphlineheight: 28px;
  --eventlistparagraphcolor: #757575;
  --eventlistparagraphmargin: 0px 0px 15px;
  --eventlistparagraphminheight: auto;
  --eventlistbtn: inline-block;
  --eventlistbtnfontsize: 14px;
  --eventlistbtnfontweight: 300;
  --eventlistbtnpadding: 0px !important;
  --eventlistbtnbgcolor: none;
  --eventlistbtncolor: #333;
  --eventlistbtnbgcolorhover: none;
  --eventlistbtncolorhover: #003190;
  --eventlistbtnbefore: none;
  --eventcategorylistsize: 14px;
  --eventcategorylistweight: 500;
  --eventcategorylistcolor: #545454;
  --eventcategorylistborder: 1px solid #fff;
  --eventcategorylistsizehover: 14px;
  --eventcategorylistweighthover: 500;
  --eventcategorylistcolorhover: #000000;
  --eventcategorylistborderhover: 1px solid #fff;
  --eventcategorylistpadding: 3px 0px 3px 0px;
  /**/
  --eventcategorylistmargintpbt: 0px 0px 20px;
  --eventlistradiusboximg: 12px;
  /*event Filter List head+data Start*/
  --eventlistfilteheadrsize: 16px;
  --eventlistfilterheadweight: 500;
  --eventlistfilterheadcolor: #000;
  --eventlistfilterheadmargin: 15px 0px 0px;
  --eventlistfilterheadpadding: 10px 0px;
  --eventlistfilterheadborder: 1px solid #3333;
  /*event Filter List head+data End*/
  /*event List Variable End*/

  /* Slider CSS Start*/
  --sliderarrowdisplay: none;
  --slidercaptionleft: 50%;
  --slidercaptiontop: 42%;
  --slidercaptionbottom: auto;

  --bannerlayertextalign: center;
  --bannerlayercolor: #fff;
  --bannerlayerheading: 48px;
  --bannerlayertagline: 18px;
  --bannerlayerpra: 16px;

  --sliderbtnbg: #00467a;
  --sliderbtncolor: #fff;
  --sliderbtnhovercolor: #fff;
  --sliderbtnbgbefore: #00407f;
  --sliderbtnborder: 1px solid #00467a;
  --sliderbtnhoverborder: 1px solid #00467a;
  /* Slider CSS END*/

  /* btn CSS Start*/
  --btndownloadbg: #ee4433;
  --btndownloadcolor: #fff;
  --btndownloadborder: 1px solid #ee4433;
  --btndownloadborderbottom: 4px solid #9f190c;

  --btnbg: #00467a;
  --btnhoverbg: #00467a;
  --btncolor: #fff;
  --btnhovercolor: #fff;
  --btnborder: 1px solid #00467a;
  --btnborderhover: 1px solid #00467a;

  --btnborderbottom: 4px solid #0e3c5e;
  --btnborderhoverbottom: 4px solid #0e3c5e;

  --btnradius: 7px;
  --btnbgbefore: #1b2f05;
  --btnfontsize: 16px;
  --btnfontweight: 500;
  --btnpadding: 5px 10px;
  --btntransform: uppercase;

  --btniconbg: #fff;
  --btniconhoverbg: #fff;
  --btniconcolor: #121212;
  --btniconhovercolor: #121212;

  --allbtnfontsize: 12px;
  --allbtnfontweight: 400;
  --allbtnlineheight: 20px;
  --activebtnbg: #00a8d2;
  --activebtnborder: 1px solid #00a8d2;
  --activebtnbottomborder: 4px solid #0fbce7;
  --activebtnhoverborder: 1px solid #0e3c5e;
  --activebtnbottomhoverborder: 4px solid #0e3c5e;

  --boxattributebg: #fff;
  --boxattributeselectbg: #00467a;
  --boxattributeborder: 1px dashed #b0b0b0;
  --boxattributeselectborder: 1px solid #00a8d2;
  --boxattributeshadow: 1px 3px 4px #00abd345;
  --boxattributecolor: #333;
  --boxattributeselectcolor: #fff;

  --hdrsnglrwdrkbtn: var(--btniconbg);
  --hdrsnglrwdrkbtncolor: var(--btncolor);
  --hdrsnglrwdrkbtnhover: var(--btnhoverbg);
  --hdrsnglrwdrkbtncolorhover: var(--btnhovercolor);

  --hdrsnglrwlightbtn: var(--btniconbg);
  --hdrsnglrwlightbtncolor: var(--btniconcolor);
  --hdrsnglrwlightbtnhover: var(--btniconhoverbg);
  --hdrsnglrwlightbtncolorhover: var(--btniconhovercolor);
  /* btn CSS END*/

  /* Header Single Row btn CSS Start */
  --headerbtnbg: #00407f;
  --headerbtncolor: #fff;
  --headerbtnradius: 7px;
  --hdrsnglrwdrkbtnhover: var(--btnhoverbg);
  --hdrsnglrwdrkbtncolorhover: var(--btnhovercolor);
  --hdrsnglrwlightbtn: var(--btniconbg);
  --hdrsnglrwlightbtncolor: var(--btniconcolor);
  --hdrsnglrwlightbtnhover: var(--btniconhoverbg);
  --hdrsnglrwlightbtncolorhover: var(--btniconhovercolor);
  /* Header Single Row btn CSS Start */

  --bs-btn-hover-border-color: 1px solid #00467a;
  --leftrightarrow: url(/files/Images/leftrightarrow.png);
--topheaderfontsize:14px;
  /* Product List Btn+login Start*/
  --prolistloginbtncolor: #00467a;
  --prolistloginbtnhovercolor: #00467a;
  --prolistloginbtnbg: #00467a38;
  --prolistloginbtnhoverbg: #00467a38;
  --prolistloginbtnborder: 1px solid #fff;
  --prolistloginbtnhoverborder: 1px solid #00467a38;
  --prolistloginf-size: 12px;

  --prolistsendquecolor: #fff;
  --prolistsendquehovercolor: #fff;
  --prolistsendquebg: #00467a;
  --prolistsendquehoverbg: #00467a;
  --prolistsendqueborder: 1px solid #00467a;
  --prolistsendquehoverborder: 1px solid #00467a;
  --prolistsendquef-size: 12px;
  /* Product List Btn+login End*/

  /* Product List ToolTip Text Start*/
  --producticontop: auto;
  --producticonbottom: 35px;
  --showtooltiptext: inline-block;
  /*Wishlist(ShowWishListText) Module Text Start*/
  --ShowWishListText: "Add To Shortlist";
  --ShowWishListTextremove: "Remove From Shortlist";
  /*Wishlist(ShowWishListText) Module Text End*/
  /*Enquiry(GlobalPaths.ShowRFQText) Module Text Start*/
  --GlobalPaths.ShowRFQText: "Add To Enquiry";
  --GlobalPaths.ShowRFQTextremove: "Remove From Enquiry";
  /*Enquiry(GlobalPaths.ShowRFQText) Module Text End*/
  /*Compare(ShowCompareText) Module Text Start*/
  --ShowCompareText: "Add To Compare";
  --ShowCompareTextremove: "Remove From Compare";
  /*Compare(ShowCompareText) Module Text End*/
  /* Product List ToolTip Text End */

  /*Button Text Start*/
  --ShowSendQueryText: "Send Query";
  --ShowOrderNowText: "";
  --ShowAddCartText: "Add To Cart";
  --ShowAddCartTextremove: "View Cart";
  --ShowDeleteFromCart: "Delete From Cart";
  /*Button Text End*/

  /*Header/Common Icon Text Start*/
  --quot-name: none;
  --quot-namersdisplay: none;
  --quot-nametextcolor: #fff;
  --RFQHeaderText: "Enquiry";
  --RecentViewHeaderText: "Viewed";
  --WishlistHeaderText: "Shortlist";
  --cartHeaderText: "Cart";
  /*Header/Common Icon Text End*/

  --clicktoadd: "Click To Add";
  --clicktoremove: "Click To Remove";
  --attributecolorlistbox: 3px;
  --attributecolorlistboxlineheight: 12px;
  --attributecolorlistboxheight: 16px;
  --attributecolorlistboxwidth: 16px;
  --attributecolordetailbox: 3px;
  --attributecolorname: none;
  --attributecolordetailboxheight: 27px;
  --attributecolordetailboxwidth: 80px;

  /*Filter Text size padding start*/
  --filter-panel-headsize: 14px;
  --filter-panel-headweight: 400;
  --filter-panel-headpadd: 4px 15px;
  --filter-panel-headcolor: #212121;
  --filter-panel-headbordertop: 1px solid #cacaca;

  --filter-panelbody-textsize: 12px;
  --filter-panelbody-textweight: 300;
  --filter-panelbody-textmargin: 0px 5px 0px;
  --filter-panelbody-textcolor: #000;
  --filter-panelbody-textfamily: 1px solid #212121;

  --filter-panelheadbg: #fcfcfc;
  --filter-panelbodybg: #fff;
  --filter-panelbodypadding: 10px 12px 5px;

  --filter-panelbody-checkboxwidth: 14px;
  --filter-panelbody-checkboxheight: 14px;
  --filter-panelbody-checkboxmarginright: 7px;

  --filter-result-top: 121px;

  --filter-result-colorbox-radius: 50%;
  --filterresultbadgeresultbox-radius: 4px;
  /*Filter Text size padding End*/

  /*Breadcrumbicon Start*/
  --breadcrumbicon: "\f105";
  --breadcrumbdisplayrs: block;
  /*Breadcrumbicon End*/

  /* Start Product List threecolumnlist */
  --threecolumnlist-col-md-3filter-by-block: 25%;
  --threecolumnlist-col-md-9filter-pl: 75%;
  --threecolumnlist-col-md-9filter-pl-RS: 100%;

  /* Start Product View in Threecolumn */
  --threecolumnlist-grid-list-box-pro: calc(34.4% - 1.4rem);
  --threecolumnlist-list-list-box-pro: calc(50% - 1rem);
  --product-listview-product-img: 48.33333%;
  --product-listview-product-description: 49.66666%;

  --fourcolumnlist-grid-list-box-pro: calc(26% - 1.70455rem);
  --fourcolumnlist-list-list-box-pro: calc(33.5% - 1rem);
  /* End Product View in Threecolumn*/

  /* Start Product Detail*/
  --product-detail-leftimage: 50%;
  --product-detail-rightcontent: 50%;
  --product-detail-leftcontentpadfing: 0px;
  --product-detail-leftcontentstrongwidth: auto;
    --ShowproductdetailText: "Product details";
  /* End Product Detail*/

  /*Search Design full screen search Start*/
  --headersearchpopupinputborder: 2px solid #999999;
  --headersearchpopupbg: #fff;
  --headersearchpopupheading: 26px;
  --headersearchpopupheadingcolor: #00407f;
  /*Search Design full screen search End*/

  --main-theme-bg: #004579;
  --border-theme: 1px solid #004579;
  --border-radius: 4px;
  --padding-btnicon: 7px 8px 3px 8px;

  --font-icon: "Font Awesome 6 Free";
  --text-transform-capitalize: capitalize;
  --text-transform-uppercase: uppercase;
  --text-transform-none: none;
  --font-size48: 48px;
  --font-size26: 26px;
  --font-size24: 24px;
  --font-size22: 22px;
  --font-size20: 20px;
  --font-size16: 16px;
  --font-lg: 18px;
  --font-base: 14px;
  --font-sm: 14px;
  --font-xsm: 12px;
  --font-xxsm: 10px;

  /*Product List heading size color css start*/
  --font-base-prolist-head: 12px;
    --prolistborder:1px solid #dddddd;
    --prolistimgradius:5px 5px 0px 0px;
    --prolistradius:5px;
  --prolist-head-color: #0069bd;
  --prolist-head-lineheight: 18px;
  --prolist-head-letter-spacing: 0.05em;
  --prolist-head-height: 38px;
  /*RS*/
  --font-base-prolist-head-rs: 12px;
  --prolist-head-lineheight-rs: 18px;
  --prolist-head-letter-spacing-rs: 0.5px;
  --prolist-head-height-rs: 34px;
  /*Product List heading size color css end*/

  /*Product List Tran size color css start*/
  --prolist-producttran-color: #0069bd;
  --prolist-producttran-letter-spacing: 0.05em;
  --font-sm-producttran-head: 12px;
  --font-sm-producttran-head-lineh: 20px;
  --font-sm-producttran-head-minh: 12px;
  --font-sm-producttran-head-padd: 0px 15px 3px;
  /*RS*/
  --font-sm-producttran-head-rs: 11px;
  --font-sm-producttran-head-lineh-rs: 16px;
  --font-sm-producttran-head-minh-rs: 12px;
  --font-sm-producttran-head-padd-rs: 0px 8px 2px;
  /*Product List Tran size color css end*/

  /*Product List ProductAttr size color css start*/
  --prolist-productAttr-minh: 60px;
  --prolist-productAttr-font-sm: 12px;
  --prolist-productAttr-lineh: 20px;
  /*RS*/
  --prolist-productAttr-minh-rs: 40px;
  --prolist-productAttr-font-sm-rs: 12px;
  --prolist-productAttr-lineh-rs: 16px;
  /*Product List ProductAttr size color css end*/

  /*Product List ProductPrice size color css start*/
  --prolist-productbox-minh: 150px;
  --prolist-productprice-font-sm: 18px;
  --prolist-productprice-font-w: 400;
  --prolist-productprice-font-color: #000;
  --prolist-productprice-line-through-font-sm: 12px;
  /*RS*/
  --prolist-productprice-font-sm-rs: 14px;
  --prolist-productprice-line-through-font-sm-rs: 11px;
      --prolistloginf-size:1px 12px;
    --prodetailposition:center;
  /*Product List ProductPrice size color css end*/

  --text-color: #333;
  --i-color: #1e2260;
  --line-height: 26px;
  --pragraph-line-height: 26px;
  --letter-spacing: 0.5px;
  --slider-slick-arrow-hover-bg: #ffc800;
  --slider-heading-letter-spacing: 2.5px;
  --font-slider-heading: 68px;
  --font-slider-subheading: 26px;
  --font-slider-descrpation: 18px;
  --font-normal: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;
  --font-extra-bold: 800;
  --font-size--h1: 22px;
  --font-size--h2: 20px;
  --font-size--h3: 18px;
  --font-size--h4: 16px;
  --font-size--h5: 16px;
  --font-size--h6: 18px;
  --color-primary: #333;
  --color-red: #eb4c4c;
  --color-green: #00b67a;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark: #121212;
  --color-light42: #424242;
  --color-light: #dcdcdc;
  --color-medium: #747474;
  --color-primary-rgb: 79, 90, 228;
  --color-red-rgb: 235, 76, 76;
  --color-green-rgb: 0, 182, 122;
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --color-dark-rgb: 18, 18, 18;
  --color-medium-rgb: 141, 141, 141;
  --color-light-rgb: 242, 242, 242;
  --border-color: #e8e8e8;
  --border-color-2: #ffba38;
  --text-dark: var(--color-dark);
  --text-medium: var(--color-medium);
  --text-white: var(--color-white);
  --text-light: var(--color-light);
  --btn-color: var(--text-white);
  --btn-hover-color: var(--text-white);
  --btn-hover-bg: #e9ba19;
  --top-header-icon-size: 16px;
  --bg-top-header: #000;

  --bg-1: #f9f8f2;
  --bg-2: #000;
  --bg-3: #1b2f05;
  --bg-white: var(--color-white);
  --bg-dark: var(--color-dark);
  --bg-primary-light: rgba(var(--color-primary-rgb), 0.05);
  --gradient-1: linear-gradient(
    135deg,
    rgba(var(--color-white-rgb), 0.4) 0%,
    var(--color-primary) 100%
  );
  --shadow-md: 0 5px 30px -5px rgb(8, 0, 42, 0.08);
  --shadow-round: 0 10px 30px -5px rgb(8, 0, 42, 0.08);
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-xl: 15px;
  --radius-lg: 20px;
  --radius-pill: 50rem;
  --footer-ancher-hover: #d5d5d5;
  --social-whatsapp: #25d366;
  --social-fb: #4267b2;
  --social-insta: #c13584;
  --social-twitter: #1da1f2;
  --social-linkedin: #0077b5;
  --social-youtube: #f00;
  --social-pinterest: #e60023;

  /*Blog List Variable Start*/
  --bloglistfiltersearch: block;
  --bloglisttextopacity: 0;
  --bloglisttextbefore: inline;
  --bloggridlist: 24%;

  /*Blog List Variable End*/
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background-color: var(--bg-light);
}
::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background: rgba(var(--color-dark-rgb), 0.2);
}
body {
  font-weight: normal;
  font-style: normal;
  font-size: 15px;
  color: #545454;
  letter-spacing: 0.05em;
}
body dl,
body ol,
body ul {
  margin: 0px;
  padding: 0px;
  margin-left: 20px;
}
/*ul, li, ol {
    list-style:none;
}*/
a,
a:link {
  text-decoration: none;
}

p {
  font-size: var(--font-base);
  font-weight: var(--font-normal);
  line-height: var(--pragraph-line-height);
  margin-bottom: 12px;
}
a {
  color: var(--text-dark);
  text-decoration: none;
  outline: 0 !important;
  transition: all 0.3s ease-out;
}

a:hover {
  color: var(--color-primary);
}

a.hover-primary:hover {
  color: var(--color-primary) !important;
}

.color-primary a {
  color: inherit;
}
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a {
  color: inherit;
  font-weight: 700;
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a:hover {
  color: var(--color-primary);
}

:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  display: block;
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-weight: var(--font-bold);
  line-height: 1.3;
  color: var(--color-black);
}

p {
  color: var(--color-black);
}

h1 {
  font-size: var(--font-size--h1);
}

h2,
.h2 {
  font-size: var(--font-size--h2);
}

h3,
.h3 {
  font-size: var(--font-size--h3);
}

h4,
.h4 {
  font-size: var(--font-size--h4);
}

h5,
.h5 {
  font-size: var(--font-size--h5);
}

h6,
.h6 {
  font-size: var(--font-size--h6);
}

p,
.text,
.card-text {
  color: var(--color-black);
  line-height: var(--line-height);
}

.font-lg {
  font-size: var(--font-lg) !important;
}

.font-sm {
  font-size: var(--font-sm) !important;
}
.font-xsm {
  font-size: var(--font-xsm) !important;
}
.font-medium {
  font-weight: var(--font-medium);
}
.font-bold {
  font-weight: var(--font-bold);
}
/*dl, ol, ul {
    margin: 0px;
    padding: 0px;
}*/
/*ul, li, ol {
    list-style: none;
}*/
a,
a:link {
  text-decoration: none;
}
/*----Default Css End-----*/
.slick-list {
  max-height: 600px;
}
#hotcate-wrap {
  margin: 0;
  padding-top: 30px;
  padding-bottom: 30px;
}

.bg-dark-blue.videmainsection {
  background: #3b4a57;
}
#hotcate-wrap .content-box ul li {
  width: 23.8%;
  float: left;
  padding: 0px;
  margin: 0 20px 15px 0px;
  margin-top: 10px;
  background: #fff;
}
#hotcate-wrap .content-box ul li:nth-child(4) {
  margin-right: 0px;
}
#hotcate-wrap .content-box .inner ul li {
  width: 100%;
  margin: 1px 0;
}
#hotcate-wrap .content-box ul li .inner {
  width: 96%;
  padding: 3%;
}
#hotcate-wrap .content-box ul li .inner .cat-child ul li a {
  color: #014a6d;
  font-size: 14px;
}
body #hotcate-wrap .content-box ul li .inner {
  padding: 1% 4%;
  max-height: 100px;
}
body #hotcate-wrap .content-box ul li .image-cat .second img {
  height: 145px;
}
body #hotcate-wrap .content-box ul li .image-cat .first {
  background-color: rgb(0 0 0 / 0%);
  padding: 5px 12px;
}
body #hotcate-wrap .content-box ul li .image-cat .first .title a {
  color: #000;
}
.categorydesign1 .inner {
  overflow-y: auto;
  height: 135px;
}
.content-box .categorydesign1 {
  height: 285px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.content-box .categorydesign1 .image-cat .second img {
  border-radius: 4px 4px 0px 0px;
}
.have-fixed #main .openbtn {
  top: 125px;
}
.have-fixed .filter-pl ul.deal-serch {
  top: 125px;
}
.product-grid-four .prdct-dtl .overflow-h {
  min-height: 150px;
}
i.iconcomn.deleteicon {
  background-image: url(https://www.powerfactorshop.com/assets/img/icons-delete.png) !important;
}
.SampleQuotationButtonContainer a.btnblue .carticon {
  background-position: -414px -261px;
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {
  .mulimegamenubtnmain {
    width: auto !important;
  }
  .header-v5 .wsshoptabing.wtsdepartmentmenu {
    padding-left: 1.8rem;
  }
  .wstabitem li ul li {
    width: 31%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*-------- If you want Plus-minus Menu responsive Icon - css start (If u want show arrow icon comment this css) ------------*/
  .wsmenu-click.ws-activearrow i.wsmenu-arrow {
    margin: 0;
    margin-right: 14px;
    margin-top: 14px;
  }
  .wsmenu-click02 i {
    margin-top: 14px;
    margin-right: 14px;
  }
  .wsmenu-click02.listmenu i {
    margin-right: 14px;
  }
  .wsmenu-click i,
  .wsmenu-click.ws-activearrow i.wsmenu-arrow,
  .wsmenu-click02 i,
  .dropdown-submenu .wsmenu-icon .fa-angle-right,
  .wstabitem li ul li.dropdown-submenu.fourthactiveactive .wsmenu-icon i {
    background-position: -5px -4px;
    background-size: 200px 122px;
    height: 15px;
    width: 15px;
  }
  .wsmenu-click.ws-activearrow i.wsmenu-arrow,
  .wsmenu-click02.listmenu i,
  .wstabitem li ul li.dropdown-submenu.fourthactiveactive .wsmenu-icon i {
    background-position: -32px -4px;
    background-size: 200px 122px;
    transform: none;
  }
  /*-------- If you want Plus-minus Menu responsive Icon - css end (If u want show arrow icon comment this css) ------------*/
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
  /*-------- If you want Plus-minus Menu responsive Icon - css start (If u want show arrow icon comment this css) ------------*/
  .wsmenu-click.ws-activearrow i.wsmenu-arrow {
    margin: 0;
    margin-right: 14px;
    margin-top: 14px;
  }
  .wsmenu-click02 i {
    margin-top: 14px;
    margin-right: 14px;
  }
  .wsmenu-click02.listmenu i {
    margin-right: 14px;
  }
  .wsmenu-click i,
  .wsmenu-click.ws-activearrow i.wsmenu-arrow,
  .wsmenu-click02 i,
  .dropdown-submenu .wsmenu-icon .fa-angle-right,
  .wstabitem li ul li.dropdown-submenu.fourthactiveactive .wsmenu-icon i {
    background-position: -5px -4px;
    background-size: 200px 122px;
    height: 15px;
    width: 15px;
  }
  .wsmenu-click.ws-activearrow i.wsmenu-arrow,
  .wsmenu-click02.listmenu i,
  .wstabitem li ul li.dropdown-submenu.fourthactiveactive .wsmenu-icon i {
    background-position: -32px -4px;
    background-size: 200px 122px;
    transform: none;
  }
  /*-------- If you want Plus-minus Menu responsive Icon - css end (If u want show arrow icon comment this css) ------------*/
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
  /*-------- If you want Plus-minus Menu responsive Icon - css start (If u want show arrow icon comment this css) ------------*/
  .wsmenu-click.ws-activearrow i.wsmenu-arrow {
    margin: 0;
    margin-right: 14px;
    margin-top: 14px;
  }
  .wsmenu-click02 i {
    margin-top: 14px;
    margin-right: 14px;
  }
  .wsmenu-click02.listmenu i {
    margin-right: 14px;
  }
  .wsmenu-click i,
  .wsmenu-click.ws-activearrow i.wsmenu-arrow,
  .wsmenu-click02 i,
  .dropdown-submenu .wsmenu-icon .fa-angle-right,
  .wstabitem li ul li.dropdown-submenu.fourthactiveactive .wsmenu-icon i {
    background-position: -5px -4px;
    background-size: 200px 122px;
    height: 15px;
    width: 15px;
  }
  .wsmenu-click.ws-activearrow i.wsmenu-arrow,
  .wsmenu-click02.listmenu i,
  .wstabitem li ul li.dropdown-submenu.fourthactiveactive .wsmenu-icon i {
    background-position: -32px -4px;
    background-size: 200px 122px;
    transform: none;
  }
  /*-------- If you want Plus-minus Menu responsive Icon - css end (If u want show arrow icon comment this css) ------------*/

  .wsmenu > .wsmenu-list > li > a.wtxaccountlink {
    background: #ffffff;
  }
  .wsmenu-list > li:hover > a {
    background: #ffffff !important;
  }
  .wstabitem li ul li.dropdown-submenu a {
    width: 85%;
  }

  #dvAutoComplete.autocompletearea {
    top: 35px;
  }
  .phnsrchbghead .header-search-area {
        border: none;
        width: auto;
    }
}
/*----Home----*/

/*----category----*/
/*----Product list----*/
/*----Product Detail----*/
/*----CMS----*/
@media only screen and (min-width: 320px) and (max-width: 350px) {
  .list-box-pro .btnblue {
    font-size: 11px !important;
  }
}
