@charset "utf-8";
/* CSS Document */

.working-steps-plumber {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
  .working-steps-plumber {
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }
}
.working-steps-plumber .single-plumbing-steps-wrapper {
  text-align: center;
}
.working-steps-plumber .single-plumbing-steps-wrapper .thumbnail-img {
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}
.working-steps-plumber .single-plumbing-steps-wrapper .thumbnail-img span {
  position: absolute;
  display: block;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background: #FD8F14;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  left: 50px;
  line-height: 24px;
  border: 10px solid #ffff;
}
.working-steps-plumber .single-plumbing-steps-wrapper .thumbnail-img img {
  padding: 20px;
  border: 2px dashed rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  transition: 0.3s;
}
.working-steps-plumber .single-plumbing-steps-wrapper .title {
  margin-bottom: 8px;
}
.working-steps-plumber .single-plumbing-steps-wrapper p {
  width: 80%;
  margin: auto;
}
.working-steps-plumber .single-plumbing-steps-wrapper:hover img {
  border: 2px dashed #FD8F14;
}


.header-underline {
  position: relative;
}

.header-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px; /* Adjusts the space below the header */
  width: 50px;   /* Set the desired underline width */
  height: 2px;   /* Thickness of the underline */
  background-color: #FD8F14;
}


.repair-highlight {
    color: #FD8F14;
}




.mybtn1 {
  display: inline-block !important;      /* Render based on content */
  width: auto !important;                 /* Prevents full-width */
  max-width: max-content !important;      /* Use only as much width as needed */
  flex: 0 0 auto !important;              /* Stops flex items from stretching */
  align-self: flex-start !important;      /* Prevents parent's alignment from stretching it */
  position: relative;
  background-color: #1F1F25;              /* Underlying color revealed after overlay retracts */
  color: #fff;                           /* Text color */
  border-radius: 25px;
  overflow: hidden;
}

/* Ensure the button text stays above the overlay */
.mybtn1 span,
.mybtn1 .elementor-button-text {
  position: relative;
  z-index: 2;
}

.mybtn1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FD8F14;                  /* Overlay color */
  border-radius: inherit;               /* Matches the button’s 25px radius */
  clip-path: inset(0);                  /* Fully visible overlay initially */
  transition: clip-path 0.3s ease;      /* Smooth transition */
  pointer-events: none;
  z-index: 1;
}


/* On hover, shrink the overlay horizontally from the edges inward */
.mybtn1:hover::before {
  clip-path: inset(0 50% 0 50%);
}


/* Hide background image and add 90% black overlay on mobile */
@media (max-width: 767px) {
  .left-schedule {
    background-image: none !important;
    position: relative; /* Needed for absolute positioning of the overlay */
  }

  .left-schedule::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Black with 90% opacity */
    z-index: 1; /* Ensure the overlay is above any other content if needed */
  }
}

/* Remove the overlay styles for desktop (if you had them) */
@media (min-width: 768px) {
  .left-schedule::before {
    content: none !important; /* Or you could remove this entire media query if you only want the overlay on mobile */
  }
}