/* =========================================
   DESKTOP
========================================= */
@media (min-width: 992px) {
  #mainNavbar .navbar-toggler {
    display: none;
  }

  #navbarContent {
    display: flex !important;
    flex-basis: auto;
  }
}
/* =========================================
   TABLET / MOBILE
========================================= */

@media (max-width: 991px) {
  .navbar-container {
    padding: 12px 15px 0;
  }

  #mainNavbar {
    width: calc(100% - 30px);

    max-width: none;

    height: auto;

    min-height: 64px;

    padding: 12px 20px;
  }

  #mainNavbar.navbar-scrolled {
    width: calc(100% - 30px);

    max-width: none;

    padding: 10px 20px;
  }

  #navbarContent {
    padding-top: 15px;
  }

  .navbar-actions {
    flex-direction: column;

    align-items: flex-start;

    padding-bottom: 10px;
  }
}

@media (max-width: 991px) {
  .hero-container {
    padding: 60px 20px 0;
  }

  .hero-headline h1 {
    font-size: clamp(48px, 13vw, 80px);
  }

  .hero-headline h2 {
    font-size: clamp(45px, 12vw, 75px);
  }

  .hero-description {
    font-size: 15px;
  }

  .hero-visual {
    height: 420px;

    margin-top: 50px;
  }

  .hero-plumber {
    height: 400px;
  }

  .google-rating-card {
    left: 0;

    bottom: 60px;

    transform: scale(0.85);

    transform-origin: left bottom;
  }

  .emergency-badge {
    right: 0;

    bottom: 60px;

    transform: scale(0.75);

    transform-origin: right bottom;
  }

  .hero-social-proof {
    flex-direction: column;

    align-items: stretch;

    gap: 20px;
  }

  .social-proof-divider {
    width: 100%;

    height: 1px;
  }

  .hero-h1 {
    font-size: 44px;
    font-weight: 600;
  }

  .hero-h1-weFix {
    color: #d94718;
    font-size: 44px;
    font-weight: 600;
  }

  .hero-image {
    position: absolute;

    z-index: 2;

    height: 620px;
    width: auto;

    top: -50px;
    right: 20px;

    object-fit: contain;
  }
}

@media (max-width: 576px) {
  .hero-container {
    padding-top: 45px;
  }

  .hero-cta {
    flex-direction: column;
  }

  .hero-primary-btn,
  .hero-secondary-btn {
    width: 100%;

    max-width: 280px;
  }

  .hero-visual {
    height: 350px;
  }

  .hero-plumber {
    height: 330px;
  }

  .google-rating-card {
    transform: scale(0.65);
  }

  .emergency-badge {
    transform: scale(0.6);
  }

  .hero-water-splash {
    display: none;
  }
}

@media (min-width: 577px) and (max-width: 991px) {

    .hero-image {
        position: absolute;

        z-index: 2;

        height: 620px;
        width: auto;

        top: -50px;

        left: 50%;
        right: auto;

        transform: translateX(-50%);

        object-fit: contain;
    }

    .hero-water-splash {
    left: -65px;
}
}

@media (min-width: 992px) and (max-width: 1024px) {

    .hero-image {
        position: absolute;
        z-index: 2;

        height: 620px;
        width: auto;

        top: -50px;
        left: 50%;
        right: auto;

        transform: translateX(-50%);

        object-fit: contain;
    }

    .hero-h1 {
    font-size: 50px;
    font-weight: 600;
  }

  .hero-h1-weFix {
    color: #d94718;
    font-size: 44px;
    font-weight: 600;
  }

  .hero-water-splash {


    width: 730px;
    left: -225px;
}
}

@media (max-width: 576px) {

    .hero-247-badge {
        width: 120px;
        height: 120px;

        right: 0;
        bottom: 20px;
    }

    .hero-247-center {
        width: 55px;
        height: 55px;

        font-size: 18px;
    }

    .hero-247-top-text {
        font-size: 9px;
    }

    .hero-247-bottom-text {
        font-size: 8px;
    }

}

@media (min-width: 577px) and (max-width: 1024px) {

    .hero-247-badge {
        right: 30px;
        bottom: 40px;
        width: 150px;
        height: 150px;
    }

}

@media (min-width: 577px) and (max-width: 991px) {

    #social-proof {
        padding: 0 15px 25px;
    }

    .homeowner-proof {
        padding: 20px 25px;
    }

    .avatar {
        width: 42px;
        height: 42px;
    }

    .homeowner-count {
        font-size: 18px;
    }

    .homeowner-label {
        font-size: 13px;
    }

    .brand-ticker {
        height: 90px;
    }

    .brand-logo {
        width: 150px;
        height: 50px;
    }

}

@media (max-width: 576px) {

    #social-proof {
        padding: 0 10px 20px;
    }

    .social-proof-inner {
        min-height: auto;

        display: flex;
        flex-direction: column;

        align-items: stretch;
    }


    .homeowner-proof {
        padding: 25px 20px;

        justify-content: center;
    }


    .avatar {
        width: 42px;
        height: 42px;

        margin-left: -10px;
    }


    .homeowner-avatars {
        margin-right: 15px;
    }


    .homeowner-count {
        font-size: 19px;
    }


    .homeowner-label {
        font-size: 12px;
    }


    .social-proof-divider {
        width: 90%;
        height: 1px;

        margin: 0 auto;
    }


    .brand-ticker {
        width: 100%;
        height: 85px;
    }


    .brand-ticker-track {
        gap: 45px;
    }


    .brand-logo {
        width: 130px;
        height: 45px;
    }


    .brand-logo img {
        max-height: 45px;
    }


    .brand-ticker::before,
    .brand-ticker::after {
        width: 40px;
    }

}

/* =====================================================
   WHY CHOOSE US - TABLET
===================================================== */

@media (min-width: 577px) and (max-width: 991px) {

    .why-section {
        padding: 100px 20px;
    }

    .why-heading {
        margin-bottom: 60px;
    }

    .why-heading h2 {
        font-size: 42px;
    }

    .why-stage {
        height: 850px;
    }

    .why-circle {
        width: 500px;
        height: 500px;
    }

    .guarantee-seal {
        width: 220px;
        height: 220px;
    }

    .guarantee-number span {
        font-size: 80px;
    }

    .guarantee-number small {
        font-size: 25px;
    }

    .why-card {
        width: 320px;
    }

    .why-card-top-left {
        top: 20px;
        left: 0;
    }

    .why-card-top-right {
        top: 20px;
        right: 0;
    }

    .why-card-bottom-left {
        bottom: 20px;
        left: 0;
    }

    .why-card-bottom-right {
        bottom: 20px;
        right: 0;
    }
}

/* =====================================================
   WHY CHOOSE US - MOBILE
===================================================== */

@media (max-width: 576px) {

    .why-section {
        padding: 80px 16px;
    }

    .why-heading {
        margin-bottom: 45px;
    }

    .why-heading h2 {
        font-size: 34px;
        line-height: 1.15;
    }

    .why-stage {
        height: auto;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 18px;
    }

    /*
       Hide the large desktop circle on mobile.
       The cards become easier to read when stacked.
    */

    .why-circle {
        width: 350px;
        height: 350px;

        position: absolute;

        top: 180px;
        left: 50%;

        opacity: 0.35;
    }

    .guarantee-seal {
        position: relative;

        left: auto;
        top: auto;

        transform: none;

        width: 190px;
        height: 190px;

        margin-bottom: 20px;
    }

    .guarantee-number span {
        font-size: 65px;
    }

    .guarantee-number small {
        font-size: 21px;
    }

    .guarantee-label {
        margin-top: 12px;
    }

    .guarantee-label span {
        font-size: 10px;
    }

    .guarantee-label strong {
        font-size: 15px;
    }

    .why-card {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        min-height: auto;

        padding: 20px;
    }

    .why-card-content h3 {
        font-size: 18px;
    }

    .why-card-content p {
        font-size: 13px;
    }

    .about-image-wrapper {
    height: 0px;
}
}

/* =====================================================
   ABOUT SECTION - TABLET
===================================================== */

@media (min-width: 577px) and (max-width: 991px) {

    .about-section {
        padding: 90px 0;
    }

    .about-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* Image */
    .about-visual {
        width: 100%;
    }

    .about-image-wrapper {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .about-image-wrapper {
    height: 0px;
}

    .about-image {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Content */
    .about-content {
        width: 100%;
        text-align: center;
    }

    .about-tag {
        justify-content: center;
    }

    .about-content h2 {
        font-size: 42px;
        line-height: 1.15;
    }

    .about-description {
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Stats */
    .about-stats {
        justify-content: center;
    }

    .about-stat {
        text-align: center;
    }
}

/* =====================================================
   ABOUT SECTION - MOBILE
===================================================== */

@media (max-width: 576px) {

    .about-section {
        padding: 70px 0;
    }

    .about-wrapper {
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    /* ================= IMAGE ================= */

    .about-visual {
        width: 100%;
    }

    .about-image-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .about-image {
        width: 100%;
        height: auto;
        display: block;
    }


    /* ================= CONTENT ================= */

    .about-content {
        width: 100%;
        text-align: center;
    }

    .about-tag {
        justify-content: center;
    }

    .about-tag span:first-child {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .about-content h2 {
        font-size: 32px;
        line-height: 1.15;
        letter-spacing: -0.5px;
    }


    /* ================= STATS ================= */

    .about-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;

        margin-top: 30px;
    }

    .about-stat {
        text-align: center;
    }

    .about-stat-number {
        font-size: 25px;
    }

    .about-stat-label {
        font-size: 11px;
        line-height: 1.3;
    }


    /* ================= DESCRIPTION ================= */

    .about-description {
        margin-top: 25px;
    }

    .about-description p {
        font-size: 14px;
        line-height: 1.7;
    }

}

@media (max-width: 375px) {

    .about-section {
        padding: 60px 0;
    }

    .about-content h2 {
        font-size: 29px;
    }

    .about-stats {
        gap: 5px;
    }

    .about-stat-number {
        font-size: 22px;
    }

    .about-stat-label {
        font-size: 10px;
    }

    .about-description p {
        font-size: 13px;
    }
}

/* =========================================
   TABLET
========================================= */

@media (min-width: 577px) and (max-width: 991px) {

    .process-section {
        min-height: 350vh;
        padding: 0 20px;
    }

    .process-sticky {
        min-height: 650px;
    }

    .process-heading {
        margin-bottom: 35px;
    }

    .process-heading h2 {
        font-size: 42px;
    }

    .process-container {
        height: 520px;
    }

    .process-blueprint {
        width: 600px;
        height: 300px;
    }

    .process-timeline {
        width: 600px;
    }

    .process-step {
        min-height: 190px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .process-icon {
        width: 65px;
        height: 65px;
        font-size: 24px;
        margin-bottom: 15px;
    }

    .process-step-content h3 {
        font-size: 18px;
    }

    .process-step-content p {
        font-size: 13px;
    }

    .process-step-marker {
        width: 50px;
        height: 50px;
    }

    .process-step-marker span {
        font-size: 16px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 576px) {

    .process-section {
        min-height: auto;

        padding: 70px 15px;
    }


    .process-sticky {
        position: relative;

        top: auto;

        height: auto;
        min-height: auto;

        display: block;

        overflow: visible;
    }


    /* Heading */

    .process-heading {
        margin-bottom: 45px;
    }


    .process-tag > span {
        font-size: 12px;

        letter-spacing: 2px;
    }


    .process-heading h2 {
        font-size: 32px;

        line-height: 1.15;

        letter-spacing: -0.5px;
    }


    /* Container */

    .process-container {
        width: 100%;

        height: auto;

        margin: 0;
    }


    /* Hide desktop blueprint */

    .process-blueprint {
        display: none;
    }


    /* Hide desktop timeline */

    .process-timeline {
        position: absolute;

        left: 28px;
        top: 0;

        width: 3px;
        height: 100%;

        transform: none;
    }


    .process-line {
        width: 3px;
        height: 100%;
    }


    .process-progress {
        width: 3px !important;
        height: 0;

        transition: height 0.4s ease;
    }


    /* Steps */

    .process-steps {
        position: relative;

        display: flex;

        flex-direction: column;

        gap: 0;

        padding-left: 65px;
    }


    .process-step {
        min-height: auto;

        padding: 0 0 55px;

        text-align: left;

        opacity: 0.25;

        transform: translateY(15px);
    }


    .process-step.active {
        opacity: 1;

        transform: translateY(0);
        padding-left: 25px !important;
    }


    /* Icon */

    .process-icon {
        width: 56px;
        height: 56px;

        margin: 0 0 15px;

        font-size: 21px;
    }


    .process-step-content h3 {
        font-size: 19px;

        margin-bottom: 8px;
    }


    .process-step-content p {
        max-width: none;

        margin: 0;

        font-size: 14px;

        line-height: 1.6;
    }


    /* Markers */

    .process-step-marker {
        left: 28px !important;

        width: 44px;
        height: 44px;

        transform: translate(-50%, 0);
    }


    .marker-1 {
        top: 0;
    }


    .marker-2 {
        top: 25%;
    }


    .marker-3 {
        top: 50%;
    }


    .marker-4 {
        top: 75%;
    }


    .process-step-marker span {
        font-size: 15px;
    }


    .process-step-marker.active {
        transform: translate(-50%, 0) scale(1.08);
    }
}

/* =========================================
   TABLET
========================================= */

@media (min-width: 577px) and (max-width: 991px) {

    .projects-section {
        padding: 90px 0;
    }


    .projects-heading {
        margin-bottom: 50px;
    }


    .projects-heading h2 {
        font-size: 42px;
    }


    .projects-track {
        gap: 24px;

        padding: 0 24px;

        animation-duration: 32s;
    }


    .project-card {
        flex-basis: 340px;

        width: 340px;

        height: 450px;

        border-radius: 22px;
    }


    .project-overlay {
        padding: 80px 22px 22px;
    }


    .project-overlay h3 {
        font-size: 19px;
    }


    .projects-fade {
        width: 90px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 576px) {

    .projects-section {
        padding: 70px 0;
    }


    .projects-heading {
        margin-bottom: 40px;

        padding: 0 15px;
    }


    .projects-tag > span {
        font-size: 12px;

        letter-spacing: 2px;
    }


    .projects-heading h2 {
        font-size: 32px;

        line-height: 1.15;

        letter-spacing: -0.5px;
    }


    .projects-track {
        gap: 16px;

        padding: 0 15px;

        animation-duration: 28s;
    }


    .project-card {
        flex-basis: 280px;

        width: 280px;

        height: 390px;

        border-radius: 20px;
    }


    /*
     * On mobile there is no hover.
     * Keep the project information visible.
     */

    .project-overlay {
        opacity: 1;

        transform: none;

        min-height: 55%;

        padding: 70px 20px 20px;
    }


    .project-overlay h3 {
        font-size: 18px;
    }


    .project-overlay p {
        font-size: 11px;
    }


    .projects-fade {
        width: 45px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 375px) {

    .projects-heading h2 {
        font-size: 29px;
    }


    .project-card {
        flex-basis: 260px;

        width: 260px;

        height: 370px;
    }


    .project-overlay h3 {
        font-size: 17px;
    }
}

/* =========================================================
   PRICING - RESPONSIVE
========================================================= */

/* ================= TABLET ================= */

@media (min-width: 577px) and (max-width: 991px) {

    .pricing-section {
        padding: 90px 20px;
    }

    /* Heading */

    .pricing-heading {
        margin-bottom: 55px;
    }

    .pricing-heading h2 {
        font-size: 42px;
        line-height: 1.15;
    }


    /* Cards */

    .pricing-container {
        width: 100%;
        max-width: 750px;
        margin: 0 auto;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .pricing-card {
        width: 100%;
        min-width: 0;
        min-height: 600px;

        padding: 32px 25px 28px;

        border-radius: 30px;
    }

    .pricing-card-popular {
        border-radius: 38px;
    }


    /* Third card */

    .pricing-card:nth-child(3) {
        grid-column: 1 / -1;

        width: calc(50% - 10px);

        justify-self: center;
    }


    /* Card heading */

    .pricing-name {
        font-size: 13px;
        letter-spacing: 2px;
    }


    /* Price */

    .pricing-price-row {
        align-items: flex-start;
    }

    .amount {
        font-size: 68px;
        letter-spacing: -1.5px;
    }

    .currency {
        margin-top: 9px;
        font-size: 30px;
    }


    /* Description */

    .pricing-description {
        font-size: 13px;
        line-height: 1.6;
    }


    /* Features */

    .pricing-feature {
        font-size: 14px;
        gap: 10px;
    }

    .check-circle {
        width: 27px;
        height: 27px;
        flex-shrink: 0;
    }


    /* Button */

    .pricing-button {
        min-height: 54px;
        margin-top: 30px;
    }
}


/* ================= MOBILE ================= */

@media (max-width: 576px) {

    .pricing-section {
        padding: 70px 15px;
        overflow: hidden;
    }


    /* Heading */

    .pricing-heading {
        width: 100%;
        margin-bottom: 40px;
    }

    .pricing-tag {
        gap: 9px;
        margin-bottom: 15px;
    }

    .pricing-tag > span {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .pricing-lines {
        gap: 3px;
    }

    .pricing-lines span {
        width: 16px;
        height: 2px;
    }

    .pricing-lines span:last-child {
        width: 6px;
    }

    .pricing-heading h2 {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;

        font-size: 32px;
        line-height: 1.15;
        letter-spacing: -0.5px;
    }


    /* Cards container */

    .pricing-container {
        width: 100%;
        max-width: 430px;
        margin: 0 auto;

        display: flex;
        flex-direction: column;

        gap: 20px;
    }


    /* Cards */

    .pricing-card,
    .pricing-card:nth-child(3) {
        width: 100%;
        min-width: 0;
        min-height: auto;

        padding: 32px 22px 24px;

        border-radius: 28px;

        box-sizing: border-box;
    }

    .pricing-card-popular {
        border-radius: 34px;
    }


    /* Popular badge */

    .popular-badge {
        top: 14px;
        right: 14px;

        padding: 7px 10px;

        font-size: 8px;
        letter-spacing: 0.8px;
    }


    /* Card heading */

    .pricing-name {
        margin-bottom: 20px;

        font-size: 12px;
        letter-spacing: 2px;
        line-height: 18px;

        padding-right: 30px;
    }


    /* Price */

    .pricing-price {
        margin-bottom: 0;
    }

    .pricing-price-row {
        align-items: flex-start;
        justify-content: center;
    }

    .currency {
        margin-top: 8px;
        font-size: 27px;
    }

    .amount {
        font-size: 62px;
        line-height: 0.95;
        letter-spacing: -1.5px;
    }

    .starting-text {
        margin-top: 10px;
        font-size: 13px;
    }


    /* Middle */

    .pricing-middle {
        margin-top: 25px;
    }

    .pricing-description {
        min-height: auto;

        margin: 0 0 25px;

        font-size: 13px;
        line-height: 1.6;

        text-align: center;
    }


    /* Features */

    .pricing-features {
        gap: 14px;
    }

    .pricing-feature {
        width: 100%;

        display: flex;
        align-items: center;

        gap: 10px;

        font-size: 14px;
        line-height: 20px;
    }

    .check-circle {
        width: 27px;
        height: 27px;

        flex: 0 0 27px;

        font-size: 14px;
    }


    /* Button */

    .pricing-button {
        width: 100%;
        min-height: 54px;

        margin-top: 30px;

        border-radius: 27px;

        font-size: 14px;
    }
}


/* ================= SMALL MOBILE ================= */

@media (max-width: 375px) {

    .pricing-section {
        padding: 60px 12px;
    }

    .pricing-heading {
        margin-bottom: 35px;
    }

    .pricing-heading h2 {
        font-size: 29px;
    }

    .pricing-container {
        gap: 16px;
    }

    .pricing-card,
    .pricing-card:nth-child(3) {
        padding: 28px 18px 22px;
        border-radius: 25px;
    }

    .pricing-card-popular {
        border-radius: 30px;
    }

    .amount {
        font-size: 56px;
    }

    .currency {
        font-size: 24px;
    }

    .starting-text {
        font-size: 12px;
    }

    .pricing-description {
        font-size: 12.5px;
    }

    .pricing-feature {
        font-size: 13px;
        gap: 9px;
    }

    .check-circle {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }

    .pricing-button {
        min-height: 52px;
    }
}

/* =========================================================
   TESTIMONIALS - LARGE TABLET / SMALL DESKTOP
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .testimonials-section {
        padding: 100px 20px 0;
    }

    .testimonials-heading h2 {
        font-size: 44px;
    }

    .testimonials-stage {
        min-height: 620px;
    }

    .testimonial-card {
        width: 500px;

        grid-template-columns: 175px 1fr;

        gap: 20px;

        padding: 16px;
    }

    .testimonial-photo {
        width: 175px;
        height: 250px;
    }

    .testimonial-quote p {
        font-size: 18px;
    }


    /*
     * Reduce the horizontal spread
     * because the screen is smaller.
     */

    .testimonial-card-1 {
        --start-x: -225px;
        --start-y: 0px;
    }

    .testimonial-card-2 {
        --start-x: 255px;
        --start-y: 10px;
    }

    .testimonial-card-3 {
        --start-x: -475px;
        --start-y: 20px;
    }

    .testimonial-card-4 {
        --start-x: 485px;
        --start-y: 20px;
    }
}


/* =========================================================
   TESTIMONIALS - TABLET
========================================================= */

@media (min-width: 577px) and (max-width: 991px) {

    .testimonials-section {
        min-height: auto;

        padding: 90px 20px 100px;
    }

    .testimonials-heading {
        margin-bottom: 50px;
    }

    .testimonials-heading h2 {
        font-size: 42px;
    }


    /*
     * Normal 2-column layout.
     */

    .testimonials-stage {

        position: relative;

        top: auto;

        width: 100%;

        height: auto;

        min-height: 0;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    .testimonial-card,
    .testimonial-card-1,
    .testimonial-card-2,
    .testimonial-card-3,
    .testimonial-card-4 {

        position: relative;

        width: 100%;

        min-height: 270px;

        grid-template-columns: 130px 1fr;

        gap: 16px;

        padding: 14px;

        transform: none !important;

        opacity: 1 !important;

        border-radius: 28px;
    }


    .testimonial-photo {

        width: 130px;

        height: 215px;

        border-radius: 18px;
    }


    .testimonial-content {

        padding: 5px 5px 5px 0;
    }


    .testimonial-quote i {

        font-size: 32px;

        margin-bottom: 12px;
    }


    .testimonial-quote p {

        font-size: 16px;

        line-height: 1.4;
    }


    .testimonial-customer {

        margin-top: 18px;
    }


    .testimonial-customer strong {

        font-size: 14px;
    }


    .testimonial-customer span {

        font-size: 11px;
    }
}


/* =========================================================
   TESTIMONIALS - MOBILE
========================================================= */

@media (max-width: 576px) {

    .testimonials-section {

        min-height: auto;

        padding: 70px 15px 80px;
    }


    .testimonials-heading {

        margin-bottom: 40px;
    }


    .testimonials-tag > span {

        font-size: 12px;

        letter-spacing: 2px;
    }


    .testimonials-heading h2 {

        font-size: 32px;

        line-height: 1.15;

        letter-spacing: -0.5px;
    }


    /*
     * Remove sticky behavior.
     */

    .testimonials-stage {

        position: relative;

        top: auto;

        width: 100%;

        height: auto;

        min-height: 0;

        margin: 0;

        display: flex;

        flex-direction: column;

        gap: 18px;

        overflow: visible;
    }


    /*
     * Cards become normal vertical cards.
     */

    .testimonial-card,
    .testimonial-card-1,
    .testimonial-card-2,
    .testimonial-card-3,
    .testimonial-card-4 {

        position: relative;

        inset: auto;

        width: 100%;

        min-height: 0;

        display: grid;

        grid-template-columns: 105px 1fr;

        gap: 15px;

        padding: 12px;

        transform: none !important;

        opacity: 1 !important;

        border-radius: 24px;
    }


    .testimonial-photo {

        width: 105px;

        height: 170px;

        border-radius: 17px;
    }


    .testimonial-content {

        padding: 4px 4px 5px 0;
    }


    .testimonial-quote i {

        font-size: 28px;

        margin-bottom: 10px;
    }


    .testimonial-quote p {

        font-size: 15px;

        line-height: 1.4;
    }


    .testimonial-customer {

        margin-top: 15px;
    }


    .testimonial-customer strong {

        font-size: 13px;

        margin-bottom: 4px;
    }


    .testimonial-customer span {

        font-size: 10px;

        line-height: 1.4;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .testimonials-section {

        padding: 60px 12px 70px;
    }


    .testimonials-heading h2 {

        font-size: 29px;
    }


    .testimonial-card,
    .testimonial-card-1,
    .testimonial-card-2,
    .testimonial-card-3,
    .testimonial-card-4 {

        grid-template-columns: 90px 1fr;

        gap: 12px;

        padding: 10px;
    }


    .testimonial-photo {

        width: 90px;

        height: 150px;
    }


    .testimonial-quote p {

        font-size: 14px;
    }
}

/* =========================================================
   FAQ - TABLET
========================================================= */

@media (min-width: 577px) and (max-width: 991px) {

    .faq-section {
        padding: 90px 20px;
    }


    .faq-wrapper {
        grid-template-columns: 1fr;

        gap: 50px;

        width: min(750px, 100%);
    }


    .faq-left {
        text-align: center;

        padding-top: 0;
    }


    .faq-tag {
        justify-content: center;
    }


    .faq-left h2 {
        font-size: 42px;

        line-height: 1.15;
    }


    .faq-intro {
        max-width: 600px;

        margin:
            25px auto 0;

        font-size: 16px;

        line-height: 26px;
    }


    .faq-question {
        min-height: 74px;

        font-size: 18px;
    }

}


/* =========================================================
   FAQ - MOBILE
========================================================= */

@media (max-width: 576px) {

    .faq-section {
        padding: 70px 15px;
    }


    .faq-wrapper {
        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 40px;
    }


    /* LEFT */

    .faq-left {
        padding: 0;

        text-align: center;
    }


    .faq-tag {
        justify-content: center;

        margin-bottom: 16px;
    }


    .faq-tag > span {
        font-size: 12px;

        letter-spacing: 2px;
    }


    .faq-left h2 {
        font-size: 32px;

        line-height: 1.15;

        letter-spacing: -0.5px;
    }


    .faq-intro {
        max-width: 100%;

        margin-top: 20px;

        font-size: 14px;

        line-height: 23px;
    }


    /* RIGHT */

    .faq-right {
        width: 100%;

        gap: 10px;
    }


    .faq-item {
        border-radius: 14px;
    }


    .faq-question {
        min-height: 68px;

        padding: 15px;

        gap: 12px;

        font-size: 15px;

        line-height: 22px;
    }


    .faq-button {
        width: 34px;

        height: 34px;

        flex-basis: 34px;

        border-radius: 11px;
    }


    .faq-button i {
        font-size: 13px;
    }


    .faq-answer p {
        padding-left: 15px;

        padding-right: 15px;

        font-size: 13px;

        line-height: 22px;
    }


    .faq-item.active .faq-answer p {
        padding:
            0
            15px
            18px;
    }

}


/* =========================================================
   FAQ - SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .faq-section {
        padding: 60px 12px;
    }


    .faq-left h2 {
        font-size: 29px;
    }


    .faq-question {
        padding: 13px;

        font-size: 14px;

        line-height: 21px;
    }


    .faq-button {
        width: 32px;

        height: 32px;

        flex-basis: 32px;
    }


    .faq-answer p {
        font-size: 12px;

        line-height: 21px;
    }

}

@media (min-width: 577px) and (max-width: 991px) {

    .service-areas-section {
        padding: 90px 20px;
    }

    .service-areas-wrapper {

        grid-template-columns: 1fr;

        gap: 55px;

        width: min(750px, 100%);
    }


    .service-map {

        height: 480px;

        border-radius: 30px;
    }


    .service-area-content {

        max-width: 650px;

        text-align: center;

        margin: 0 auto;
    }


    .service-area-tag {

        justify-content: center;
    }


    .service-area-content h2 {

        font-size: 42px;

        line-height: 1.15;
    }


    .service-area-description {

        margin-left: auto;

        margin-right: auto;

        font-size: 16px;

        line-height: 26px;
    }


    .service-area-cta {

        justify-content: center;

        margin-top: 40px;
    }

}

@media (max-width: 576px) {

    .service-areas-section {

        padding: 70px 15px;
    }


    .service-areas-wrapper {

        display: flex;

        flex-direction: column;

        gap: 40px;

        width: 100%;
    }


    /* MAP */

    .service-map {

        width: 100%;

        height: 360px;

        border-radius: 24px;
    }


    /*
     * Make pins smaller on mobile.
     */

    .map-pin-1 .map-pin-icon {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }


    .map-pin-2 .map-pin-icon {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }


    .map-pin-3 .map-pin-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }


    .map-pin-4 .map-pin-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }


    .map-pin-5 .map-pin-icon {
        width: 46px;
        height: 46px;
        font-size: 19px;
    }


    .map-pin span {

        padding: 4px 7px;

        font-size: 8px;
    }


    .map-pin-3 span {
        font-size: 9px;
    }


    .map-pin-4 span {
        font-size: 10px;
    }


    .map-pin-5 span {
        font-size: 11px;
    }


    /* CONTENT */

    .service-area-content {

        max-width: 100%;

        text-align: center;
    }


    .service-area-tag {

        justify-content: center;

        margin-bottom: 16px;
    }


    .service-area-tag > span {

        font-size: 12px;

        letter-spacing: 2px;
    }


    .service-area-content h2 {

        font-size: 32px;

        line-height: 1.15;

        letter-spacing: -0.5px;
    }


    .service-area-description {

        margin-top: 20px;

        font-size: 14px;

        line-height: 23px;
    }


    /* CTA */

    .service-area-cta {

        margin-top: 35px;

        display: flex;

        flex-direction: column;

        gap: 25px;

        align-items: center;
    }


    .service-area-note {

        font-size: 18px;

        line-height: 22px;
    }


    .service-area-arrow {

        width: 55px;

        height: 48px;

        left: 65px;

        top: 32px;
    }


    .service-area-call {

        width: 100%;

        max-width: 250px;

        min-height: 54px;
    }

}

@media (max-width: 375px) {

    .service-areas-section {
        padding: 60px 12px;
    }


    .service-map {
        height: 320px;
        border-radius: 20px;
    }


    .service-area-content h2 {
        font-size: 29px;
    }


    .service-area-description {
        font-size: 13px;
        line-height: 22px;
    }


    .service-area-call {
        max-width: 230px;
    }

}

@media (min-width: 577px) and (max-width: 991px) {

    .contact-section {

        padding: 90px 20px;
    }


    .contact-wrapper {

        grid-template-columns: 1fr;

        gap: 55px;

        width: min(700px, 100%);
    }


    .contact-info {

        max-width: 650px;

        text-align: center;

        margin: 0 auto;
    }


    .contact-tag {

        justify-content: center;
    }


    .contact-info h2 {

        font-size: 42px;

        line-height: 1.15;
    }


    .contact-description {

        margin-left: auto;

        margin-right: auto;

        font-size: 16px;

        line-height: 26px;
    }


    .contact-list {

        width: fit-content;

        margin-left: auto;

        margin-right: auto;

        text-align: left;
    }


    .contact-form-card {

        padding: 32px;

        border-radius: 34px;
    }

}

@media (max-width: 576px) {

    .contact-section {

        padding: 70px 15px;
    }


    .contact-wrapper {

        display: flex;

        flex-direction: column;

        gap: 40px;

        width: 100%;
    }


    /* =========================
       INFO
    ========================= */

    .contact-info {

        max-width: 100%;

        text-align: center;
    }


    .contact-tag {

        justify-content: center;

        margin-bottom: 16px;
    }


    .contact-tag > span {

        font-size: 12px;

        letter-spacing: 2px;
    }


    .contact-info h2 {

        font-size: 32px;

        line-height: 1.15;

        letter-spacing: -.5px;
    }


    .contact-description {

        margin-top: 20px;

        font-size: 14px;

        line-height: 23px;
    }


    /* =========================
       CONTACT LIST
    ========================= */

    .contact-list {

        margin-top: 30px;

        gap: 15px;

        text-align: left;
    }


    .contact-icon {

        width: 46px;

        height: 46px;

        flex-basis: 46px;

        font-size: 16px;
    }


    .contact-item-text span {

        font-size: 11px;
    }


    .contact-item-text strong {

        font-size: 14px;

        word-break: break-word;
    }


    /* =========================
       FORM
    ========================= */

    .contact-form-card {

        width: 100%;

        box-sizing: border-box;

        padding: 24px 18px;

        border-radius: 28px;
    }


    .contact-form-row {

        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 18px;
    }


    .contact-field {

        gap: 8px;
    }


    .contact-field label {

        font-size: 10px;

        letter-spacing: 1px;
    }


    .contact-field input,
    .contact-field select {

        height: 50px;

        padding: 0 13px;

        font-size: 13px;
    }


    .contact-field textarea {

        min-height: 120px;

        font-size: 13px;
    }


    .contact-submit {

        min-height: 54px;

        font-size: 13px;
    }

}

@media (max-width: 375px) {

    .contact-section {

        padding: 60px 12px;
    }


    .contact-info h2 {

        font-size: 29px;
    }


    .contact-description {

        font-size: 13px;

        line-height: 22px;
    }


    .contact-form-card {

        padding: 22px 15px;

        border-radius: 24px;
    }


    .contact-item-text strong {

        font-size: 13px;
    }

}

/* =========================================================
   FOOTER TABLET
========================================================= */

@media (min-width: 577px) and (max-width: 991px) {

    .footer-top {
        width: min(700px, calc(100% - 40px));
        padding-top: 45px;
    }

    .footer-badges {
        gap: 20px;
    }

    .footer-badge {
        width: 75px;
        height: 75px;
    }

    .footer-main {
        width: min(700px, calc(100% - 40px));

        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 45px;
    }

    .footer-brand {
        grid-column: 1 / -1;
        max-width: 500px;
    }

    .footer-water {
        height: 220px;
    }
}


/* =========================================================
   FOOTER MOBILE
========================================================= */

@media (max-width: 576px) {

    .footer-top {
        width: calc(100% - 30px);
        padding-top: 35px;
    }

    .footer-badges {
        gap: 10px;
        flex-wrap: wrap;
    }

    .footer-badge {
        width: 62px;
        height: 62px;
    }

    .footer-divider {
        margin-top: 35px;
    }


    .footer-main {
        width: calc(100% - 30px);

        padding: 55px 0;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 45px 25px;
    }


    .footer-brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    .footer-logo img {
        width: 135px;
    }

    .footer-brand p {
        margin-top: 20px;
        font-size: 13px;
    }


    .footer-column h3 {
        margin-bottom: 20px;
        font-size: 12px;
    }

    .footer-column li {
        margin-bottom: 12px;
    }

    .footer-column li a {
        font-size: 13px;
    }


    .footer-contact {
        grid-column: 1 / -1;
    }

    .footer-contact-item {
        font-size: 13px;
    }


    .footer-water {
        height: 150px;
    }

    .footer-water-text {
        bottom: -15px;
        font-size: 100px;
    }


    .footer-bottom {
        width: calc(100% - 30px);

        padding: 20px 0;

        flex-direction: column;
        text-align: center;

        gap: 12px;
    }

    .footer-bottom div {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .footer-main {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-brand,
    .footer-contact {
        grid-column: auto;
    }

    .footer-water {
        height: 120px;
    }

    .footer-water-text {
        font-size: 80px;
    }
}

@media (min-width: 577px) and (max-width: 991px) {

    .service-detail-hero {
        width: calc(100% - 40px);
        min-height: 500px;
        margin-top: 30px;
        border-radius: 28px;
    }

    .service-detail-hero-content {
        width: 90%;
        padding: 70px 15px 40px;
    }

    .service-detail-hero-content h1 {
        font-size: 48px;
    }

    .service-feature-pill {
        font-size: 13px;
    }
}

@media (max-width: 576px) {

    .service-detail-hero {
        width: calc(100% - 30px);
        min-height: 520px;
        margin-top: 20px;
        border-radius: 24px;
    }

    .service-detail-hero-content {
        width: 100%;
        padding: 60px 15px 35px;
    }

    .service-detail-hero-content h1 {
        margin-bottom: 30px;

        font-size: 38px;
        line-height: 1.12;
        letter-spacing: -0.8px;
    }

    .service-included-title {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .service-feature-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .service-feature-pill {
        justify-content: flex-start;

        padding: 12px 15px;

        border-radius: 18px;

        font-size: 13px;
        line-height: 18px;

        text-align: left;
    }
}

@media (max-width: 375px) {

    .service-detail-hero {
        min-height: 500px;
    }

    .service-detail-hero-content h1 {
        font-size: 34px;
    }

    .service-feature-pill {
        font-size: 12px;
    }
}

@media (min-width: 577px) and (max-width: 991px) {

    .service-about-section {
        width: calc(100% - 40px);
        padding: 90px 0;
    }

    .service-about-intro {
        gap: 45px;
        margin-bottom: 70px;
    }

    .service-about-intro-left h2 {
        font-size: 28px;
    }

    .service-about-lead {
        font-size: 15px;
    }

    .service-issues {
        gap: 40px;
    }

    .service-issues-image {
        height: 450px;
        border-radius: 26px;
    }

    .service-issues-content h2 {
        font-size: 25px;
    }
}

@media (max-width: 576px) {

    .service-about-section {
        width: calc(100% - 30px);
        padding: 70px 0;
    }

    .service-about-intro {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 60px;
    }

    .service-about-intro-left h2 {
        margin-bottom: 20px;
        font-size: 28px;
    }

    .service-about-lead {
        font-size: 14px;
        line-height: 1.65;
    }

    .service-about-intro-right {
        padding-top: 0;
    }

    .service-about-intro-right p {
        font-size: 13px;
        line-height: 1.7;
    }


    .service-issues {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .service-issues-image {
        height: 360px;
        border-radius: 24px;
    }

    .service-issues-content h2 {
        margin-bottom: 25px;
        font-size: 25px;
    }

    .service-issues-list {
        gap: 16px;
        margin-bottom: 30px;
    }

    .service-issue-item {
        gap: 12px;
    }

    .service-issue-item p {
        font-size: 13px;
    }

    .service-issues-btn {
        min-height: 54px;
        padding-left: 22px;
    }
}

@media (max-width: 375px) {

    .service-about-section {
        width: calc(100% - 24px);
        padding: 60px 0;
    }

    .service-about-intro-left h2 {
        font-size: 25px;
    }

    .service-about-lead {
        font-size: 13px;
    }

    .service-issues-image {
        height: 320px;
    }

    .service-issues-content h2 {
        font-size: 23px;
    }

    .service-issue-item p {
        font-size: 12px;
    }
}