* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body, table, td, th {
  font-family: "open sans", sans-serif !important;
  font-size: 14px;
  line-height: 1.4;
   overflow-x: hidden;
}

img {
  max-width: 100% !important;
  height: auto !important;
  border: none !important;
}

table {
  border-collapse: collapse;
  width: 100%;
}
/* Typography Reset & Standards */
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1.2;
  margin: 0 0 15px 0;
  color: inherit;
  padding:0;
}

h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p {
  margin: 0 0 15px 0;
  line-height: 1.5;
  padding:0;

}

a {
  color: #0066cc;
  text-decoration: underline;
  padding:0;
}

a:hover {
  text-decoration: none;
}

ul, ol {
  margin: 0 0 15px 20px;
 
}

li {
  margin-bottom: 0px;
}

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

/* Common utility classes */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.font-bold { font-weight: bold !important; }
.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }

/* Most reliable approach for eBay */
@media (min-width: 1380px) {
    .container
   {
        max-width: 1100px !important;	
    }
}
/* Hide eBay’s extra <center> or wrapper tables */
#page + center
 {
  display: none !important;
}
/* Remove eBay’s injected <br clear="all"> */
br[clear="all"] {
  display: none !important;
}
/* Reset fonts (override eBay’s inline defaults) */
 #page {
  
}

.top-message
{
  background: #333;
 }
 .top-message p
 {
	 display:flex;
	 justify-content:center;
	 color:#fff;
     font-size:16px;
      font-family: "Open Sans", sans-serif;
     text-transform:uppercase;
	 font-weight: 700;
  letter-spacing: 0.25px;
    padding:10px 0px 0px 0px;
 }
 @media  (max-width:576px)
 {
	 .top-message p
	 {
	font-size:14px;
	text-align:center;
	 display:block;}
	
 }
 #header

 {background-color:#fff;}
 .logo 
 {
 display: flex;
  justify-content: center;
margin: 19px 0px 10px 0px;
 }
 .logo a
 {
width: 217px;
 }
 
  /* ==================================================
      COMMON MENU STYLES for BOTH MOBILE AND DESKTOP
     ================================================== */
 .categories
 {
	 
	 list-style-type:none;
	 margin:0;
	 padding:0;
	 
 }
  .categories a
  {
	text-decoration:none;
	color:#fff;
	font-size:14px;
	font-weight:500;
	}
	
	  /* ==================================================
           DESKTOP MENU STYLES
        ================================================== */
		#desktop-menu
		{
			background-color:#333;
		}
		

		#header-menu-mobile .row, #desktop-menu .row
		{
	background-color:#333;
	border-radius:5px;
	margin: 0;
		}
 #desktop-menu .categories
 {
	 display:flex;
	 flex-direction:row;
	 flex-wrap:nowrap;
	 justify-content:center;
 }
 #desktop-menu .categories li
 {
	 
        /* flex:1;*/
          position: relative; 
 }
 #desktop-menu .categories li a
 {
	 display:block;
	 text-align:center;
	 padding: 0 25px;
	 height:47px;
	 line-height:47px;
	 color:#fff;
	transition: background-color 0.3s ease;
	font-family: "open sans", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
 }
 
 #desktop-menu .categories > li > a:hover
 {
	 background-color:#86b040;
    border-radius: 3px; /* Add rounded corners */
    margin: 0 5px;
 }
  /* later on i will add there dropdown section */
 
    /* ==================================================
           MOBILE MENU STYLES
      ================================================== */
           MOBILE MENU STYLES
#header-menu-mobile
		{
			background-color:#000;
		}
        #header-menu-mobile .row {
          
            border-radius: 5px;
            margin: 20px 0;
        }

        /* ==================================================
           MOBILE MENU TOGGLE BUTTON
           ================================================== */

        .mobile-control {
            /* Hide the checkbox - we'll use it for CSS-only toggle */
            display: none;
        }

        .mobile-menu-toggle {
            /* Style the toggle button */
            display: block;
            cursor: pointer;
            padding: 0 15px;
            height: 40px;
            line-height: 38px;
            color: #fff;
            font-weight: 700;
            font-size: 14px;
           margin:0;
		   color:#fff !important;
		   font-family: "open sans", sans-serif;
        }

        /* ==================================================
           HAMBURGER ICON STYLES
           ================================================== */

        .mobile-menu-toggle .icon {
            /* Container for hamburger lines */
            float: left;
            width: 22px;
            margin-right: 8px;
            margin-top: 9px;
            padding: 3px 0;
        }

        .mobile-menu-toggle .icon span {
            /* Individual hamburger lines */
            display: block;
            background-color: #fff !important;
            width: 100%;
            height: 3px;
            transition: all 0.3s ease; /* Smooth animation */
        }

        .mobile-menu-toggle .icon span + span {
            /* Space between lines */
            margin-top: 4px;
        }

        /* ==================================================
           HAMBURGER ANIMATION (when menu is open)
           ================================================== */

        .mobile-control:checked + .mobile-menu-toggle .icon span:nth-child(1) {
            /* Top line rotates and moves down */
            transform: rotate(45deg) translate(5px, 5px);
        }

        .mobile-control:checked + .mobile-menu-toggle .icon span:nth-child(2) {
            /* Middle line disappears */
            opacity: 0;
        }

        .mobile-control:checked + .mobile-menu-toggle .icon span:nth-child(3) {
            /* Bottom line rotates and moves up */
            transform: rotate(-45deg) translate(7px, -6px);
        }

        /* ==================================================
           MOBILE MENU DROPDOWN STYLES
           ================================================== */

        #header-menu-mobile .categories {
            /* Hidden by default */
            display: none;
            padding: 0 15px 10px;
            background-color: #333333;
        }

        #header-menu-mobile .categories > li {
            /* List item styling */
            border-bottom: 1px solid #444;
        }

        #header-menu-mobile .categories > li:last-child {
            border-bottom: none;
        }

        #header-menu-mobile .categories > li > a {
            /* Mobile menu link styling */
            display: block;
            padding: 12px 0;
            color: #fff;
            transition: color 0.3s ease;
			font-family: "open sans", sans-serif;
			font-size:12px;
        }

        #header-menu-mobile .categories > li > a:hover {
            color: #86af3f; /* Green on hover */
        }

        /* ==================================================
           TOGGLE FUNCTIONALITY (Pure CSS)
           ================================================== */

        .mobile-control:checked ~ .categories {
            /* Show menu when checkbox is checked */
            display: block !important;
            animation: slideDown 0.3s ease-out;
        }

        /* Slide down animation */
        @keyframes slideDown {
            from {
                opacity: 0;
                max-height: 0;
            }
            to {
                opacity: 1;
                max-height: 500px;
            }
        }
		/* selling point start*/
		#sellingpoints
		
		{
		font-size:14px;
		background-color:#fff;
		color:#6e7278;
		margin-top: 3px;
		padding:10px;
		text-align:center;
		font-family: "open sans", sans-serif;
		}
 @media(max-width:768px) {
   .p-box
	{
		display:flex;
 flex-direction:column;
 flex:1 45%;
 font-size:11px;
 gap:0px;
 align-items:space-between;
 font-family: "open sans", sans-serif;
 /*
 background-color:#333;
 border-radius:6px;*/
 padding:10px;
 color:#333;
 
  }
  
 }
  .p-box
  {
	  display:flex;
	  flex-direction:row;
	  align-items:center;
	  gap:10px;
	  
  }
  @media (min-width:768px)
  {
   #sellingpoints > .p-box
  {
	  display:flex;
	  flex-direction:row;
	  align-items:center;
	  gap:20px;
	font-family: "open sans", sans-serif; 
	font-size:15px;
	border-right: 1px solid #333;
  line-height: 10px;
  padding-right: 36px;
  }
 #sellingpoints > .p-box:last-child
  {
	  border-right:none;
  }
  }
 
.icondesign
  {
color:#86b040;
font-size:18px;

  }
  /*selling point end*/
  
  #main-content{
  padding-top: 35px;
	padding-bottom: 20px;

	background-color:#FEFEFE;
  }
  .left-content
  {
	  padding:0;
  }
  @media (max-width: 767px) {
	#main-content{
		padding-top: 15px;
	}
}

   /* left side categories design*/
  .sidebar
  {
	  background-color:#fff;
	  border-radius:1px;
	  overflow:hidden;
	  margin-bottom: 20px;
  }
  .sidecategory
 
 {
	 background-color:#333;
	 color:#fff;
text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
 padding: 10px 14px;
 		font-family: "open sans", sans-serif;

 }
 #main ul.left-category
 {
	 margin:0;
	 padding:0px;
	 list-style:none;
 }
 #main ul.left-category > li
 {
	 border-bottom: 1px solid #f0f0f0;
	 }
 #main ul.left-category > li:last-child
 {border-bottom:none;}
  #main ul.left-category > li > a
  {display:block;
  text-decoration:none;
  color:#333;
  font-size:15px;
  font-weight:600;
  padding:15px 20px;
  position:relative;
   transition: all 0.3s ease;
   font-family: "open sans", sans-serif;

  }
   #main ul.left-category > li > a::before
   {
		 content: "•";
	    width: 8px;
             height: 8px;
            border-radius: 50%;
            background-color: #86af3f;
            display: inline-block;
            margin-right: 12px;
            transition: all 0.3s ease;
   }
    #main ul.left-category > li > a:hover
	{
		background-color: #86af3f;
		color:#fff;
		padding-left:25px;
	}
	#main ul.left-category > li > a:hover::before
	{background-color:#fff;
		  transform: scale(1.2);
	}
   
 .cat-count
 {
 float: right;
            background-color: #e8e8e8;
            color: #666;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
            font-weight: 500;	
 }
 	#main ul.left-category > li > a:hover .cat-count
	{
		 background-color: rgba(255,255,255,0.3);
            color: #fff;
	}
	#main ul.left-category > li > ul
	{
		  padding: 0;
            margin: 0;
            list-style: none;
            background-color: #fafafa;
	}
  #main ul.left-category > li > ul > li
  {
	  border-bottom: 1px solid #eeeeee;
  }
   #main ul.left-category > li > ul > li:last-child
   {
	   border-bottom:none;
   }
    #main ul.left-category > li > ul > li > a
	{
		display:block;
		font-size:14px;
		font-weight:500;
		text-decoration:none;
		color:#555;
		padding:12px 20px 12px 40px;
        position: relative;
		transition: all 0.3s ease;
		font-family: "open sans", sans-serif;
		
	}
	 #main ul.left-category > li > ul > li > a::before
	 {
		 margin-right:10px;
		 font-size:12px;
		 color:#999;
	transition: all 0.3s ease;
		 
	 }
	  #main ul.left-category > li > ul > li > a:hover
	  {
		   background-color: #86af3f;
            color: #fff;
            padding-left: 45px;
	  }
	    #main ul.left-category > li > ul > li > a:hover::before
		
		{color:#fff;} /* SPECIAL CATEGORY TYPES */
		 #main ul.left-category > li.feature-cat > a
		 {
			  background-color: #86b040;
            color: #fff;
		 }
		  #main ul.left-category > li.feature-cat > a::before
		  {
			   background-color: #fff;
		  }
		    #main ul.left-category > li.feature-cat > a:hover
			{
				 background-color: #e55a2b;
			}
			 #main ul.left-category > li.new > a::after
			 
			 {content: 'New';
			 position:absolute;
			 right:15px;
			 top:50%;
			  background-color: #ff4757;
            color: #fff;
            font-size: 10px;
			  transform: translateY(-50%);
			   border-radius: 8px;
			  padding: 2px 6px;
          
			 }
			    @media (max-width: 767px) {

            #main ul.left-category > li > a {
                padding: 18px 15px;
                font-size: 16px;
            }
            
            #main ul.left-category > li > ul > li > a {
                padding: 15px 15px 15px 35px;
                font-size: 15px;
            } 
			}
        @media (max-width: 480px) {
            #main ul.left-category > li > a {
                padding: 20px 15px;
                font-size: 17px;
            }
        }
  /*catgeories ended*/
  
 /* gallery start*/
.right-content

{padding:0;}
.main-title
{
background-color:#333;
color:#fff;
font-size:16px;
font-weight:600;
line-height:30px;
text-transform:uppercase;
font-family: "Open Sans", sans-serif;
padding:5px 14px;
border-bottom:2px solid #333;
margin-top:0;
}
.image-gallery
{
	position:relative;
	 width: 95%;
  margin: 2em auto auto;
}
.image-gallery img {
  margin: 0 auto;
}
.slider
{
	width:100%;
	display:inline-block;
	padding-top:480px;
}
.slider .img-details

{width:100%;
position:absolute;
left:0;
top:0;
transition:all 0.5s;
z-index:22;
height:445px;
background:#fff;
text-align:center;
max-height:570px;
}
.slider .img-details img
{
max-width:100%;
max-height:443px;
}
.slider input[name="slide_switch"]
{display:none;
}
.slider label
{
	margin-right:11px;
	display:inline-block;
	cursor:pointer;
	transition:all 0.5s;
	opacity:1;
	float:left;
	margin-bottom:1em;
}
.slider span
{display:inline-table; /* change into inline-table*/
width:110px;
height:110px;
text-align:center;
border: 1px solid #cdcdce;
}
.slider span:has(img[src*="liquid"])
{display:none;
}
.slider label img
{
	max-width:100%;
	width:auto;
	padding:1px;
	max-height:108px;
	
}
.slider img[src*="liquid"]
{
	display:none;
}
.slider input[name="slide_switch"]:checked + label
{
	opacity:1;
	
}
.slider input ~ .img-details
{margin-bottom:0;
}
.slider input[name="slide_switch"] ~ .img-details
{
	opacity:0;
	display:none;
}
.slider input[name="slide_switch"]:checked + label + .img-details
{
	opacity:1;
	display:block;
	transform:scale(1);
}
.slider #id1 + label + .img-details
{
	display:block;
	opacity:1;
	transform:scale(1);
}
.main-gallery
{background-color:#fff !important;
border:1px solid #cccccc;}
@media (max-width: 1210px) and (min-width: 1140px)
{
.slider
{
	padding-top:495px;
}
.slider .img-details,
.slider .img-details img
{max-height:475px;
}
}
@media (min-width: 992px) and (max-width: 1140px)
{
.slider #id1 + label + .img-details:hover,
.slider input[name="slide_switch"]:checked + label + .img-details:hover
{transform: scale(1.1);
border:1px solid #ed1d24;
}
}
@media (max-width:992px)
{.slider
	{padding-top:495px;}
	.slider .img-details,
	.slider .img-details img
	{max-height:450px;}
	}
	@media (max-width:939px)
	{.slider
		{padding-top:475px;
		}
		.slider .img-details,
		.slider .img-details img
		{max-height:455px;}
		}
		@media (width:768px)
		{
.slider
{padding-top:390px;
}
.slider .img-details,
.slider .img-details img
{
max-height:370px;
}
.slider label
{
	margin-right:14px;
	
}
.slider span
{
	width:81px;
	height:81px;
}
.slider label img
{
	max-height:79px;
}}

@media (max-width:767px)
{
.slider
{
	
	padding-top:320px;
	width:100%;
	position:relative;
}
.slider .img-details,
.slider .img-details img
{
	max-height:300px;
	
}
.slider label 
{
	margin-right:12px;
	
}
.slider span
{
	width:66px;
	height:66px;
}
.slider label img
{
max-height:64px;}

}
/*slider gallery end*/
/* description start*/
.main-description
{margin-top:1em;
	font-size:16px;
	text-transform:uppercase;
	background-color:#333;
	color:#fff;
	font-family:"Open Sans", sans-serif;
	padding: 12px 15px;
	font-weight:700;
	letter-spacing:0px;
	margin: 0;
}
.desc-d
{
margin-bottom: 10px;
  margin-top: 0px;
  float: left;
  line-height: 23px;
  padding: 13px;
  width: 100%;
  border: 1px solid #ccc;
  text-align: justify;
  list-style: inside;
  color: #000;
  font-size: 14px;
  letter-spacing: 0px;
  font-family:"Open Sans", sans-serif;
 
}

/*** Description Overides ***/

.desc-d img{
	max-width: 100%;
	width: auto !important;
	height: auto !important;
}

.desc-d ul li,
.desc-d ol li{
	margin-bottom: 4px;
}

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

.desc-d ul li{
	background-image: url(../images/tick.PNG);
	background-repeat: no-repeat;
	background-position: left center;
	padding: 0 0 0 28px;
	line-height: 20px;
	margin-bottom: 15px;
}

.desc-d table{
	font-size: 13px;
}
.desc-d font,
.desc-d b font,
.desc-d strong font,
.desc-d p font,
.desc-d ul li font,
.desc-d ol li font,
.desc-d th font,
.desc-d td font,
.desc-d h2 font,
.desc-d h3 font,
.desc-d h4 font,
.desc-d h5 font,
.desc-d b,
.desc-d strong{
	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

.desc-d p,
.desc-d ul li,
.desc-d ol li,
.desc-d th,
.desc-d td,
.desc-d h2,
.desc-d h3,
.desc-d h4,
.desc-d h5,
.desc-d span,
.desc-d div{

line-height: inherit !important;}
/* tab start*/
.tabs
{margin-top:0;
background-color:#333;
}
.tabs .tab-control
{display:none;}

.tabs > label 
{display:block;
float:left;
position:relative;
z-index:10;
padding:15px 40px;
margin:0;
font-size:14px;
color:#fff;
border-right:1px solid #5c5c5c;
font-family: "Open Sans", sans-serif;
}
.tabs > label:hover
{
	color:#fff;
	background-color:#86b040;
	cursor:pointer;
}
.tabs #tab-control-1:checked ~ label[for="tab-control-1"],
.tabs #tab-control-2:checked ~ label[for="tab-control-2"],
.tabs #tab-control-3:checked ~ label[for="tab-control-3"],
.tabs #tab-control-4:checked ~ label[for="tab-control-4"],
.tabs #tab-control-5:checked ~ label[for="tab-control-5"],
.tabs #tab-control-6:checked ~ label[for="tab-control-6"],
.tabs #tab-control-7:checked ~ label[for="tab-control-7"]
{
	background-color:#86b040;
	color:#fff;
}
@media(max-width:767px)
{
	.tabs
	{
	border:1px solid #ccc;
	border-top:0;
	}
	
	.tabs > label 
	{
		width:100%;
		margin:0;
		padding:15px 15px;
		border:0;
		border-top:1px solid #333;
		
		/*
		background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEAgxTG1meQKhxtQX8hvgNLF3mdt0LfW8HoQ&s'); /* will add arrow later need to add
		background-repeat:no-repeat;
		background-position:right center;
		background-size:20px;*/
	}
	.tabs > label:hover,
	.tabs #tab-control-1:checked ~ label[for="tab-control-1"],
	.tabs #tab-control-2:checked ~ label[for="tab-control-2"],
	.tabs #tab-control-3:checked ~ label[for="tab-control-3"],
	.tabs #tab-control-4:checked ~ label[for="tab-control-4"],
	.tabs #tab-control-5:checked ~ label[for="tab-control-5"],
	.tabs #tab-control-6:checked ~ label[for="tab-control-6"],
	.tabs #tab-control-7:checked ~ label[for="tab-control-7"]
	{/* for mobile image*/
		background-image:url(''); 
border-bottom:0;
		
	}
}
.tabs .tab-content
{display:none;
/*
animation-name:fade-in;
animation-duration:1.0s;*/
float:left;
width:100%;
padding:20px 40px;
font-size:13px;
line-height:1.5;
color:#333;
border:1px solid #dcdcdc;
border-top:0;
background-color:#fff;
font-family: "open sans", sans-serif;
}
.tabs .tab-content img,
.tabs .tab-content img
{width:auto !important;
height:auto !important;
max-width:100%;
}
.tabs .tab-content ul li,
.tabs .tab-content ol li
{margin-bottom:4px;
}
@media (max-width:767px)
{
.tabs .tab-content
{border:0;
padding:15px;
}
}

#tab-control-1:checked ~ #tab-content-1,
#tab-control-2:checked ~ #tab-content-2,
#tab-control-3:checked ~ #tab-content-3,
#tab-control-4:checked ~ #tab-content-4,
#tab-control-5:checked ~ #tab-content-5,
#tab-control-6:checked ~ #tab-content-6,
#tab-control-7:checked ~ #tab-content-7
{
	display:block;
}
@media(max-width:767px)
{
	.tabs .desktop-label
	{
		display:none;
		
	}
}
@media(min-width:768px)
{
.tabs .mobile-label
	{
		display:none;
		
	}
}

/* testing before and after */
@media(max-width:767px)
{

.tabs > label::before
	{
display: inline-block;
    width: 28px;
    height: 16px;
    position: absolute;
    right: 10px;
    top: 15px;
    content: "\2b";
    font-family: "font Awesome 7 free";
    font-size: 20px;
    padding-right: 10px;
    vertical-align: middle;
    float: right;
    font-weight:400;
}}
@media(max-width:767px)
{
  #tab-control-1:checked ~ label[for="tab-control-1"]::before,
  #tab-control-2:checked ~ label[for="tab-control-2"]::before,
  #tab-control-3:checked ~ label[for="tab-control-3"]::before,
  #tab-control-4:checked ~ label[for="tab-control-4"]::before,
  #tab-control-5:checked ~ label[for="tab-control-5"]::before,
#tab-control-6:checked ~ label[for="tab-control-6"]::before,
#tab-control-7:checked ~ label[for="tab-control-7"]::before{
    display: inline-block;
    width: 24px;
    height: 16px;
    position: absolute;
    right: 10px;
    top: 15px;
    content: "\2212";
	font-family:"font Awesome 7 free";
    font-size: 25px;
    padding-right: 10px;
    vertical-align: middle;
    float: right;
    font-weight: 400;
  
}}
/* footer */
.footer
{
background-color:#000;
margin-top:1em;
padding: 19px 0;
color: #fff;

}
.footer > .inner-footer
{background-color:#000;
padding-top:1em;
padding-bottom:2em;}

.foot-box
{
	color:#86b040;
	font-size:16px;
	margin-top:10px;
	margin-bottom:13px;
	font-weight:bold;
	float:left;
	width:100%;
	text-transform:uppercase;
	font-family: "open sans", sans-serif;
	
	
}
.footer ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}
.footer ul li
{
	padding: 3px 0;
}
.footer ul li a
{color:#fff;
text-decoration:none;
font-size:14px;
text-transform:uppercase;
font-family: "open sans", sans-serif;

}
.footer ul li a::before
{
            font-weight: 900;
            content: "\f0da"; /* Arrow right */
            margin-right: 8px;
			font-family: "Font Awesome 7 Free";
			color:#86b040;
}
.footer ul li
{
	padding: 3px 0;
}

.footer ul li a:hover
{color:#86b040;

}
.signup
{
	margin-top:25px;
}
.signup a
{background-color: #86b040;
  color: #fff;
  padding: 10px;
  display:inline-block;
  text-decoration:none;
  text-transform:uppercase;
  border-radius:2px;
  font-family: "open sans", sans-serif;
  }
.signup a:hover
{
	background-color:#fff;
	color:#86b040;
	border: 2px solid #86b040;
	
}
 
.fas
{margin-right:10px;
}
.footer-icon li, p
{
	font-family: "open sans", sans-serif;

}
@media(max-width:576px)
{
	.signup
	{
    margin-bottom:20px;
}
.signup a
  {font-size:12px;
  margin:0;
  padding:6px;}
}}

/* end basic */