:root {
--blue-light: #00bcff;
--blue: #14259c;
--blue-dark: #102E4A;
--blue-link: #0094c8;
--black: #101d20;
--gray: #414040;
--gray-light: #999;
--gray-lighter: #ececec;
--white: #fff;
--san-serif: 'Roboto', sans-serif;
}

body{
	font-size: 17px;
	font-family: var(--san-serif);
	color: var(--gray);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  font-family: var(--san-serif);
}

a:hover {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

img.full-image {
	width: 100%;
}

img.full-image2 {
	width: 500px;
  height: 500px;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

.detail-info {
		margin-top: 30px;
}

/**** nav bar ****/
  .get-pricing-btn {
    background-color:#39A71B;
    color:#fff;
    padding-top:10px;
    padding-bottom:10px; 
    padding-left: 10px; 
    padding-right: 10px;
  }

  .topnav {
    overflow: hidden;
    display: flex;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .active {
    background-color: #04AA6D;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  .dropdown {
    float: left;
    overflow: hidden;
    z-index: 1000;
  }
  
  .dropdown .dropbtn {
    border: none;
    outline: none;
    color: white;
    padding: 18px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none; /* Hide by default */
    flex-wrap: wrap;
    position: absolute;
    background-color: #f9f9f9;
    max-width: 700px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}

.dropdown-content.show {
  display: flex; 
}

.dropdown-content a {
    flex: 1 1 50%; 
    box-sizing: border-box;
    padding: 10px;
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown:hover .dropdown-content {
    display: flex; /* Show the dropdown content on hover */
}

.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #39A71B;
    color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}
  
  /* @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
      z-index: 1;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  } */
  
/***** head *****/
.header {
    background: var(--blue-light);
    height: 60px;
    align-content: center;
}

.topbar {
    background: var(--blue);
    height: 60px;
    align-content: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.menu-item {
  font-weight: 700;
  font-size: 1.3rem;
}

/***** breadcrumbs *****/
.breadcrumbs li {
  font-size: 0.9rem;
  text-transform: none;
}

.breadcrumbs a {
    color: var(--blue-link);
}

/***** Content *****/
.content {
    margin: 20px auto 120px auto;
}

/***** Carousel *****/
.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0; 
    padding: 0; 
}
  
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
    display: none;
    text-align: center;
    max-height: 25rem;
}

.carousel-item.active {
    display: block;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

.carousel-dots {
    position: absolute;
    bottom: 10px;
    /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 20;
    /* Ensure dots are above the images */
}

.carousel-dot {
    width: 10px;
    height: 10px;
    background-color: gray;
    border: none;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.carousel-dot.active {
    background-color: black;
}
  

/***** Catalog *****/
a.feature {
    position: relative;
    color: var(--gray);
    margin-bottom: 1rem;
    float: left;
    border: 1px solid #eeeeee;
    padding: 1rem;
    box-shadow: 0px 4px 8px #eeeeee;
}

.product-image {
  width: 236px;
  height: 236px;
  object-fit: contain;
  vertical-align: middle;
}

a.catalog {
    color: var(--gray);
    margin-bottom: 0.7rem;
    float: left;
}

a.feature:hover img,
a.catalog:hover img {
    opacity: 0.6;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
a.feature:hover h5, a.feature:hover h6,
a.catalog:hover h5, a.catalog:hover h6 {
  text-decoration: underline;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

/***** Category *****/

.catalog img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  vertical-align: middle;
}

/***** Product *****/
.product-description ol br, .product-description ul br, .product-description li br {
    display: none !important;
}

/** Product List ***/
.product {
    position: relative;
}

.best-seller-badge, .new-product-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: green; /* Adjust color as needed */
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 10;
}

.canadian-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  font-size: 12px;
  z-index: 10;
}

.canadian-badge svg {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  height: auto;
}

.canadian-badge2 svg {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 35px;
  height: auto;
  z-index: 10;
}

.canadian-badge3 svg {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 35px;
  height: auto;
  z-index: 100;
}

.image-container {
    position: relative;
}

.image-container img {
    display: block;
    width: 190px;
    height: 190px;
    object-fit: contain;
}

/***** Footer *****/
.footer {
    background: var(--gray-lighter);
    padding-top:10px; padding-bottom:10px;
    font-size:16px;
}

/***** Forms *****/

[type=file], [type=checkbox], [type=radio] {
    margin: 0 0 0.5rem;
    width: 20px;
    height: 20px;
}

[type=checkbox] + label, [type=radio] + label {
    vertical-align: text-bottom;
}

fieldset.filter-list label {
    font-size: 1rem;
}
#filter-data {
	display: none;
}

@media print, screen and (min-width: 40em) {
	a.feature {
	    margin-bottom: 1.5rem;
	}
}

@media print, screen and (min-width: 64em) {
	a.feature {
	    margin-bottom: 1.8rem;
	}
  #filter-data {
      display: block !important;
  }
}

@media only screen and (max-width: 600px) {
  .product-image {
    width: 161px;
    height: 161px;
  }

  .carousel-item {
    height: auto;
}

  .carousel-item img{
    width: auto;
    height: auto;
  }

  .get-pricing-btn {
    background-color:#39A71B;
    color:#fff;
    padding: 5px;
  }

  #tennier-phone {
    display: none;
  }
}