/* Reduce h1 for mobile banners Eg Skip Hire Wolverhampton page */
.hero-new .text-mobile h1 {
    font-size: 2.75rem;
}

.hero-new .text-mobile h1 .yellow-text {
	color: #fff200;
}
	
.hero-new .text-mobile h1 .small-text {
    font-size: 2.00rem; /* Smaller size for first and third lines */
}

.hero-new .text-mobile .row ul {
    display: contents;
}

/* Full width image for blog homepage and pages */
.blog-list-item__figure {
    width: 50%;
    max-width: 100%;
}


/* Start - Footer text colour changes to make it accessible for Core Web Vitals */
.footer__nav label {
    color: #fff400;
}

.footer__phone {
    color: #fff;
}

.footer__nav a {
    color: #fff;
}

.footer p .whitetext {
    color: #fff;
}

.footer p * .whitetext {
    color: #fff;
}
/* End - Footer text colour changes to make it accessible for Core Web Vitals */

/* Start - Text align and colour for accordion on service pages */
.ui-widget {
    text-align: left;
	
}

.ui-widget-content a {
    color: #09f;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #000;
    background: #000;
}
/* End - Text align and colour for accordion on service pages */

/* Responsive YouTube videos */
.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* New rows on nearby locations widget on location pages */
.location-links .col-md-3 {
    margin-bottom: 20px; /* adjust the value to increase or decrease the gap */
}

/* Start - Stacked images for rubbish removal location pages */
#rubbish-removal-image .row {
  padding: 20px;
}

div.rubbish-removal-choose.no-padding-left {
  padding-left: 0;
}

#rubbish-removal-bullet-points ul {
	font-size: .875rem;
	line-height: 1.57;
	color: #404040;
}

.recycling-centers {
  margin-top: -50px;
}
/* End - Stacked images for rubbish removal location pages */

/* Padding around related blogs on blog pages */
.blog-related-articles__item {
    padding: 5px;
}

/* Start - Yellow bullet point ticks on banners */
.hero-new.hero ul li:before {
    color: #fff200;
}
/* End - Yellow bullet point ticks on banners */

/* Start - CSS for border columns */
/* Existing class for the container */
.columns-border-container {
  width: 100%;
  max-width: 1138px;
  display: grid;
  grid-template-columns: 1fr; /* Stacks boxes vertically on small screens */
  gap: 20px; /* Adds some vertical space between boxes when stacked */
}

/* Existing class for individual boxes */
.columns-border-box {
  box-sizing: border-box;
  text-align: center;
  padding: 20px 20px 10px 20px; /* Adds some whitespace inside the boxes */
  box-shadow: 0 3px 4px 0 rgba(0,0,0,0.13);
  border: 1px solid #dadada;
  background-color: #ffffff; /* Changes the background color */
  order: 0!important; /* Resets the order value so first column is not pushed to the end */
}

/* Existing class for images */
.columns-border-box img {
  width: auto; /* Adjust as needed */
  height: auto;
}

/* Media query for larger screens */
@media (min-width: 768px) {
  .two-columns-border-layout .columns-border-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }
  .three-columns-border-layout .columns-border-container {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
  }
  .four-columns-border-layout .columns-border-container {
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
  }
  .five-columns-border-layout .columns-border-container {
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
  }
}

/* End - CSS for border columns */

/* Start - CSS for plain columns */
/* Existing class for the container */
.columns-plain-container {
  width: 100%;
  max-width: 1138px;
  display: grid;
  grid-template-columns: 1fr; /* Stacks boxes vertically on small screens */
  gap: 20px; /* Adds some vertical space between boxes when stacked */
}

/* Existing class for individual boxes */
.columns-plain-box {
  box-sizing: border-box;
  text-align: center;
  order: 0!important; /* Resets the order value */
  padding-top: 20px!important; /* Resets the padding-top value */
}

/* Existing class for images */
.columns-plain-box img {
  width: 100%; /* Adjust as needed */
  height: auto;
}

/* Media query for larger screens */
@media (min-width: 768px) {
  .two-columns-plain-layout .columns-plain-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }
  .three-columns-plain-layout .columns-plain-container {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
  }
  .four-columns-plain-layout .columns-plain-container {
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
  }
  .five-columns-plain-layout .columns-plain-container {
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
  }
}
/* End - CSS for plain columns */

/* Start - Colour changes of bullet icons on accepted waste lists */
.accepted-list li {
	padding: 10px;
    padding-left: 30px;
    position: relative;
}

.accepted-list li::marker {
    content: "\f058";
    font-family: 'FontAwesome';
    font-weight: normal;
    position: absolute;
    text-rendering: optimizeLegibility;
    font-style: normal;
    font-size: 1.25rem;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
	color: green; /* This sets the color of the bullet points */
}

.not-accepted-list li {
   padding: 10px;
    padding-left: 30px;
    position: relative;
}

.not-accepted-list li::marker {
    content: "\f057";
    font-family: 'FontAwesome';
    font-weight: normal;
    position: absolute;
    text-rendering: optimizeLegibility;
    font-style: normal;
    font-size: 1.25rem;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
	color: red;
}
/* End - Colour changes of bullet icons on accepted waste lists */

/* Start HIPPO NOW banner shading removed */
#widget_9780.hero-new.gradient-desktop:before,
#widget_9607.hero-new.gradient-desktop:before {
    background-image: none;
    opacity: 0;
}
/* End HIPPO NOW banner shading removed */

/* Start - Banner image responsiveness for mobile */
.hero-new.hero-mobile {
    background-size: cover; /* Cover ensures the background image fully covers the section */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}
/* End - Banner image responsiveness for mobile */

/* Start - Waste Accepted & Not Accepted Matrix */
#wasteaccepteddesktop {
  border-collapse: collapse;
table-layout: fixed;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

#wasteacceptedmobile {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  text-size: 10px;
  padding: 5px;
}

tr:nth-child(even){background-color: #f2f2f2}
/* End - Waste Accepted & Not Accepted Matrix */

/* Start - Center align content like Instagram embeds */
.centered-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
/* End - Center align content like Instagram embeds */