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

/* ----------------------------------------------------
	You can put your custom css code here: 
-------------------------------------------------------*/
/* TM added the following custom code on 10/5/2025 */

/* Code for dropdown under Pages , currently removed this feature in front end */ 
.dropdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Creates 4 equal columns */
  gap: 10px; /* Adds some space between items */
  width: 800px; /* Adjust width as needed */
}

/* If you want to ensure each row has exactly 4 items, 
 even if the last row isn't full */
.dropdown li {
  min-width: 0; /* Prevents overflow */
}

/* WhatsApp code to add it at bottom right of website */

.whatsapp-float {
  position: fixed;
  bottom: 20px; /* Adjust this value to change how much it floats above the bottom */
  right: 20px; /* Distance from the right */
  z-index: 100; /* Ensures it stays above other elements */
  transition: all 0.3s ease; /* Optional: for hover effects */
}

/* Optional hover effect */
.whatsapp-float:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}

/* custom CSS for Offers section listing all items on Homepage TM 5/20/2025 */
/* 1. Base item styling with spacing */
.offer {
  height: 100%;
  margin-bottom: 30px; /* Space between rows */
  padding: 20px; /* Inner spacing */
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}


/* 2. Clearfix enhancement */    /* Not used */ 
.row {
  overflow: hidden; /* Alternative to clearfix */
}


/* 3. Responsive margin adjustment */


@media (max-width: 767px) {
  .offer {
      margin-bottom: 20px; /* Smaller gap on mobile */
  }
}


/* 4. Equal height columns (optional) */  /* removed this it was misplacing "GET QUOTE" and putting it towards center on the header of page */
/*
.row {
  display: flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
}
  */

  /* Make text color green as below. Add this class to the HTML5 code class*/
  .textcolor {
    color: #8ac926 !important;
}

/* Make image background color green. Used on contact page for icons */
.img-bg-color {
  background-color: #8ac926; /* Same color as textcolor */
  display: inline-block; /* Ensures background wraps the image properly */
  padding: 5px; /* Optional: Adds some spacing around the image */
}

/* used to center text for Request quote on some pages e.g service.php at bottom */
.txtcenter {
  text-align: center;
  line-height: 100px; /* Must match height */
  height: 100px;
}

/* Add custom dots for the bullets on product list TM */ 
.custom-dots {
  list-style: none; /* Removes default bullets */
  padding-left: 20px; /* Adds space for custom dots */
}
.custom-dots li::before {
  content: "•"; /* Adds bullet symbol */
  color: #8ac926; /* Your desired color */
  font-weight: bold; /* Makes the dot bolder */
  display: inline-block;
  width: 1em; /* Ensures consistent spacing */
  margin-left: -1em; /* Aligns bullet properly */
}