.menu-icon {
  width: 30px;
  height: 30px;
}.facebook {display: flex; justify-content: center; align-items: center; height: 100%;margin-left: 190px;}

.anchor-offset-240 {
  position: relative;
  top: -240px;
}

.anchor-offset-200 {
  position: relative;
  top: -200px;
}

.license-heading {
  color: white;
}


.trusted-overlay {
  position: absolute;
  bottom: 30px; /* or top: 50%; transform: translateY(-50%); depending on your design */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  /* If you want it more centered vertically, adjust top and transform:
     top: 50%;
     transform: translate(-50%, -50%);
  */
}

/* Transparent card styling */
.transparent-card {
  background-color: rgba(255, 255, 255, 0.85); /* translucent white */
  padding: 1.5rem;
  border-radius: 10px;
  margin: 1rem 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* If you want text color to contrast on the lighter background */
.transparent-card h5,
.transparent-card p {
  color: #333; 
}

/* For any badge images (e.g., google star rating, accreditation logos) */
.review-badge {
  max-width: 80px;
  height: auto;
}


/***** Hero Section Container *****/
.hero-section {
  position: relative;
  width: 100%;
  margin-bottom: 2rem; /* space under the hero, optional */
  color: #fff; /* Default text color in hero */
  font-family: "Open Sans", sans-serif;
}

/***** Background & Spacing *****/
.hero-bg {
  background: url("../images/background.webp") center center / cover no-repeat;
  /* Replace ../images/cityscape.jpg with your background image path */
  padding: 80px 0; /* Adjust vertical padding as desired */
  position: relative;
}

/* Add overlay */
.hero-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Semi-transparent color overlay (adjust RGBA or opacity as desired) */
  background: rgba(0, 0, 0, 0.5);
  
  /* Ensure this overlay sits above the background but below text */
  z-index: 1;
}

/***** Layout & Alignment *****/
.hero-content {
position: relative;
  /* Allows vertical centering for the row’s columns */
  min-height: 300px; /* Adjust based on your design needs */
  z-index: 2; /* ensures text is on top */
}

/***** Headline & Subtext *****/
.hero-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

.hero-subtext {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: white;
  max-width: 600px; /* Helps control the line-length */
}

/***** Bullets Under Subtext *****/
.hero-bullets {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
}
.hero-bullets li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}
.hero-bullets li::before {
  content: "\f075";                /* Unicode for fa-circle */
  font-family: "Font Awesome 5 Free";  /* or "Font Awesome 6 Free" as needed */
  font-weight: 900;               /* '900' for solid icons in FA5 or FA6 */
  color: #e70000;                 /* Your brand color (red) */
  position: absolute;
  left: 0;
  font-size: 1.5rem;
  line-height: 1;
  top: 0;
}
/***** Call-to-Action Button *****/
.btn-cta {
  background-color: #e70000; /* Your brand’s red */
  border: none;
  font-size: 1.1rem;
  padding: 0.75rem 1.5rem;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.btn-cta:hover {
  background-color: #cc0000; /* Slightly darker red on hover */
}

/***** Owner/Team Photo & Intro (Right Column) *****/
.hero-guarantee {
  margin-top: 2rem; 
  /* If you want it vertically centered with your left column, 
     consider using align-items-center on the .row in your hero-content */
}

/* Container box for the guarantee text */
.guarantee-box {
  background-color: transparent !important; /* was rgba(0, 0, 0, 0.3) */
  padding: 1.5rem;
  border-radius: 8px;
  /* If you want a subtle border or light BG, do so here. E.g.: 
     border: 1px solid rgba(255,255,255,0.2); 
  */
}
/* Headline / Title in the box */
.guarantee-box h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: #fff; 
}
.guarantee-desc {
  color: #fff;
  margin-bottom: 1rem;
}

/* Bullet points for highlights */
.guarantee-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}
.guarantee-bullets li {
  margin-bottom: 0.5rem;
  color: #fff;
  position: relative;
  padding-left: 1.5rem;
}
.guarantee-bullets li::before {
  content: "\f005"; /* example: Font Awesome check icon (\f058) */
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; /* for solid icons */
  color: #e70000; /* brand color or green if you prefer */
  position: absolute;
  left: 0;
  top: 0; 
  font-size: 1rem;
}

/* CTA button */
.guarantee-cta {
  border: 2px solid #fff;
  color: #fff;
  padding: 0.5rem 1.25rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.guarantee-cta:hover {
  background-color: #e70000;
  border-color: #e70000;
  color: #fff;
}

/***** Trust Bar (Below Hero) *****/
.hero-trust-bar {
  background-color: #f2f2f2; /* Light grey background for contrast */
  padding: 20px 0;
  text-align: center;
}
.trust-badge {
  margin-bottom: 1rem;
}
.trust-badge-img {
  max-height: 50px;   /* Limit badge icon size */
  margin-bottom: 0.5rem;
}
.trust-badge-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}