.breadcrumb {
  font-size: 1rem;
  padding: 1rem 2rem 1rem 2rem;
  margin: 0;
}
.breadcrumb i, .breadcrumb a {
  text-decoration: none;
  color: black;
}

h1 {
  text-align: center;
  padding: 1rem 2rem 2rem 2rem;
  font-size: 2rem;
  font-weight: 900;
  text-wrap: balance;
  color: #001426;
  background-color: white;
  margin: 0;
}
@media (min-width: 641px) and (max-width: 1023px) {
  h1 {
    font-size: 3.2rem;
  }
}
@media (min-width: 1024px) {
  h1 {
    font-size: 3.5rem;
  }
}

h2 {
  margin: 1rem 0 0 0;
  font-size: 2rem;
  text-align: center;
  text-wrap: pretty;
}
@media (min-width: 641px) and (max-width: 1023px) {
  h2 {
    font-size: 3rem;
  }
}
@media (min-width: 1024px) {
  h2 {
    font-size: 3.5rem;
  }
}

.booking-btn,
.jump-btn {
  background-color: #e30337;
  max-width: fit-content;
  min-width: 169px;
  border: 0;
  border-radius: 0px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 600;
  outline: 0;
  padding: 16px 21px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  align-self: center;
}
.booking-btn:hover,
.jump-btn:hover {
  box-shadow: rgba(255, 255, 255, 0.2) 0 3px 15px inset, rgba(0, 0, 0, 0.1) 0 3px 5px, rgba(0, 0, 0, 0.1) 0 10px 13px;
  transform: scale(1.05);
}
@media (max-width: 403px) {
  .booking-btn,
  .jump-btn {
    padding: 10px 16px;
  }
}
@media (min-width: 404px) and (max-width: 640px) {
  .booking-btn,
  .jump-btn {
    padding: 10px 16px;
  }
}

.link-btn {
  display: block;
  width: fit-content;
  margin: 1rem auto 1rem;
  text-align: center;
  padding: 10px 20px;
  background-color: #54b2ee;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  border: none;
}
.link-btn:hover, .link-btn:focus {
  text-decoration: none !important;
  color: white;
}

.backdrop {
  background-color: #e1f0fa;
}

.services-wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.top-box {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 0 2rem 2rem 2rem;
  gap: 3rem;
  justify-content: center;
  align-items: center;
  order: -1;
}
@media (max-width: 403px) {
  .top-box {
    padding: 0 1.5rem 1.5rem 1.5rem;
  }
}
@media (min-width: 1024px) {
  .top-box {
    display: flex;
    flex-direction: row;
  }
}
.top-box .tb-text {
  display: flex;
  flex-direction: column;
  flex: 2;
  gap: 2rem;
  justify-content: center;
  text-wrap: pretty;
  max-width: 730px;
  order: 0;
}
.top-box .tb-text .hero-benefits {
  background-color: #e1f0fa;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 2px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: transform 0.3s, box-shadow 0.3s;
  padding: 2rem;
  width: fit-content;
  align-self: center;
}
@media (max-width: 403px) {
  .top-box .tb-text .hero-benefits {
    padding: 1rem 0.7rem 1rem 2rem;
  }
}
@media (min-width: 404px) and (max-width: 640px) {
  .top-box .tb-text .hero-benefits {
    padding: 1rem 0.7rem 1rem 2rem;
  }
}
.top-box .tb-img-box {
  display: flex;
  justify-content: center;
  width: 450px;
  aspect-ratio: 1/1;
  padding: 1rem;
  overflow: hidden;
  order: -1;
}
@media (max-width: 403px) {
  .top-box .tb-img-box {
    width: 250px;
    aspect-ratio: 1/1;
  }
}
@media (min-width: 404px) and (max-width: 640px) {
  .top-box .tb-img-box {
    width: 100%;
    aspect-ratio: 1/1;
  }
}
@media (min-width: 1024px) {
  .top-box .tb-img-box {
    order: 0;
  }
}
.top-box .tb-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.booking-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
}
@media (max-width: 403px) {
  .booking-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}
@media (min-width: 404px) and (max-width: 640px) {
  .booking-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
}

.md-special-box {
  display: flex;
  flex-direction: column;
  padding: 0 2rem 2rem 2rem;
  gap: 3rem;
  justify-content: center;
  align-items: center;
  margin: 0;
}
@media (max-width: 403px) {
  .md-special-box {
    padding: 0 1.5rem 1.5rem 1.5rem;
  }
}
@media (min-width: 1024px) {
  .md-special-box {
    display: flex;
    flex-direction: row;
  }
}
.md-special-box .special-img-box {
  display: flex;
  justify-content: center;
  width: 450px;
  aspect-ratio: 1/1;
  padding: 1rem;
  overflow: hidden;
}
@media (max-width: 403px) {
  .md-special-box .special-img-box {
    width: 250px;
    aspect-ratio: 1/1;
    order: -1;
  }
}
@media (min-width: 404px) and (max-width: 640px) {
  .md-special-box .special-img-box {
    width: 100%;
    aspect-ratio: 1/1;
    order: -1;
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .md-special-box .special-img-box {
    order: -1;
  }
}
.md-special-box .special-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.md-special-box .special-box-text {
  display: flex;
  flex-direction: column;
  flex: 2;
  gap: 2rem;
  justify-content: center;
  text-wrap: pretty;
  max-width: 730px;
  order: 0;
}
.md-special-box .special-box-text p {
  margin: 0;
}
.md-special-box h3 {
  text-align: center;
}

.md-sctn-flex {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
@media (max-width: 403px) {
  .md-sctn-flex {
    padding: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .md-sctn-flex {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
}

.md-box {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  gap: 2rem;
  background-color: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 2px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: transform 0.3s, box-shadow 0.3s;
  padding: 2rem;
  align-content: center;
  text-align: center;
}
@media (max-width: 403px) {
  .md-box {
    padding: 1.5rem;
  }
}
.md-box .left-fl {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.md-box .right-fl {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.md-img-box {
  width: 100%;
  align-content: center;
}
.md-img-box img {
  width: 100%;
  max-height: 418px;
  object-fit: cover;
  display: block;
}

.tips-fl {
  align-content: center;
}
.tips-fl li {
  margin-bottom: 1rem;
  text-align: left;
}

.areas-section {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.areas-section .areas-fl {
  text-align: left;
}

.map-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
.map-section .map-container {
  max-width: 418px;
  padding: 1rem;
}
.map-section .map-container img {
  width: 100%;
}

.issues-list {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 1rem;
}
.issues-list div {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  background-color: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 2px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: transform 0.3s, box-shadow 0.3s;
  padding: 1rem;
  margin: 0;
  border-radius: 20px;
  gap: 1rem;
}
.issues-list div p {
  margin: 0;
}
.issues-list div i {
  font-size: 2rem;
  color: rgb(88, 163, 120);
}

.services-box {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
}
@media (max-width: 403px) {
  .services-box {
    padding: 1.5rem;
  }
}
.services-box .mrsrvc-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
.services-box .mrsrvc-flex .service-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 420px;
  min-height: 571px;
  padding: 2rem;
  background-color: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 2px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: transform 0.3s, box-shadow 0.3s;
  justify-content: center;
  align-items: center;
}
.services-box .mrsrvc-flex .service-container .srvc-link-btn {
  align-self: flex-end;
}
.services-box .mrsrvc-flex .service-container .srvc-link-btn i {
  font-size: 2rem;
  color: #0d6efd;
}
.services-box .mrsrvc-flex .service-container .srvc-link-btn:hover {
  transform: scale(1.15);
}
.services-box .mrsrvc-flex .service-container h3 {
  text-align: center;
  text-wrap: pretty;
  margin: 0;
}
.services-box .mrsrvc-flex .service-container p {
  margin: 0;
}
.services-box .mrsrvc-flex .service-container .img-wrap img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

/* FAQ's Section*/
.faqs-section {
  padding: 2rem 1.5rem 2rem 1.5rem;
  margin: 3rem 0 3rem 0;
  background-color: white;
  text-wrap: balance;
}
.faqs-section h3 {
  margin: 1rem 0 1rem 0;
  font-weight: 700;
  font-family: Rubik, sans-serif;
  font-size: 1.5rem;
}
@media (max-width: 403px) {
  .faqs-section {
    padding: 1rem;
  }
}

/*Bottom Section*/
.bttm-sctn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  padding: 2rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
@media (max-width: 403px) {
  .bttm-sctn {
    padding: 1.5rem;
  }
}
.bttm-sctn .logo-srvcs {
  max-width: 450px;
}
.bttm-sctn .logo-srvcs img {
  width: 100%;
}
.bttm-sctn .h-p-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 450px;
  min-width: 270px;
  min-height: 238px;
  background-color: white;
  border-radius: 1rem;
  padding: 1rem;
  border: 1px solid rgb(211, 211, 211);
  box-shadow: rgba(255, 255, 255, 0.2) 0 3px 15px inset, rgba(0, 0, 0, 0.1) 0 3px 5px, rgba(0, 0, 0, 0.1) 0 10px 13px;
}
.bttm-sctn .h-p-flex h3 {
  margin: 1rem 0 1rem 0;
  font-weight: 500;
  font-size: 1.5rem;
}
.bttm-sctn .h-p-flex .booking-btn {
  align-self: center;
}
.bttm-sctn .cards-img-container {
  width: 100%;
  max-height: 40px;
  overflow: hidden;
}
.bttm-sctn .cards-img-container img {
  max-width: 100%;
  max-height: 40px;
  object-fit: contain;
}
@media (min-width: 1024px) {
  .bttm-sctn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

/* Image slider */
.before-after-container {
  --pos: 50%;
  position: relative;
  max-width: 450px;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
@media (max-width: 403px) {
  .before-after-container {
    max-width: 250px;
    aspect-ratio: 1/1;
    order: -1;
  }
}
@media (min-width: 404px) and (max-width: 640px) {
  .before-after-container {
    max-width: 100%;
    aspect-ratio: 1/1;
    order: -1;
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .before-after-container {
    order: -1;
  }
}

.img-before,
.img-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.img-before img,
.img-after img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Top image stays full-size and gets clipped */
.img-after {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Divider line */
.before-after-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: #2196f3;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}

/* Range input covers the whole component */
.slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
  z-index: 10;
  appearance: none;
  -webkit-appearance: none;
}

/* Invisible track */
.slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 100%;
  background: transparent;
}

.slider::-moz-range-track {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
}

/* Handle */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2196f3;
  border: 2px solid #2196f3;
  cursor: ew-resize;
  margin-top: calc((100% - 40px) / 2);
}

.slider::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2196f3;
  border: 2px solid #2196f3;
  cursor: ew-resize;
}

/*# sourceMappingURL=dryer-maintenance.css.map */