/* Responsive breakpoint */
@media (max-width: 768px) {
  /* Hide desktop header, show mobile header */
  .site-header--desktop {
    display: none!important;
  }
  .site-header--mobile {
    display: block!important;
  }

  /* Logo smaller */
  .site-header--mobile .logo img {
    max-height: 42px;
  }
  .header-bar__section--address, .header-bar__section--social {
    display: none!important;
  }
}

/* Responsive Adjustments for Section 1: Hero */
@media (max-width: 768px) {
    .hero-section {
        min-height: 600px;
    }

    h1 {
        font-size: 38px!important;
    }

    h2 {
        font-size: 28px!important;
    }

    h3 {
        font-size: 32px!important;
    }

    .call-button {
        font-size: 18px;
        padding: 12px 28px;
    }

    .trust-bar {
        flex-direction: column;
        padding: 15px 10px;
     }

    .trust-bar__item {
        flex: 1 1 100%;
        margin: 10px 0;
    }
}

@media (max-width: 480px) {

    .call-button {
        font-size: 16px;
        padding: 10px 24px;
    }

    .trust-bar__item {
        flex: 1 1 100%;
        margin: 5px 0;
    }
}


/* Responsive adjustments lists */
@media (max-width: 768px) {
    .section-text ul {
        columns: 2!important;
    }
}

@media (max-width: 480px) {
    .section-text ul {
        columns: 1 !important;
    }
}

/* Responsive Adjustments Section 2 */
@media (max-width: 768px) {
    .content-image-wrapper {
        flex-direction: column;
    }

    .text-column,
    .image-column {
        flex: 1 1 100%;
        padding: 10px;
    }

    .text-column ul {
        columns:1!important;
    }

    .text-column p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .header-bar {
        flex-wrap: wrap;
    }
    .header-bar__section {
        flex: 1 1 100%;
        justify-content: center !important;
        margin: 0.25rem 0;
    }
    .header-bar__section--social {
        order: 3;
    }
}

/* Responsive Adjustments Section 3: Reviews */
@media (max-width: 768px) {
    .reviews-wrapper h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .reviews-text {
        font-size: 16px;
    }
}

/* Responsive Adjustments Section 4: Icon Boxes */
@media (max-width: 992px) {
    .icon-box {
        flex: 1 1 calc(50% - 30px);
    }
}

@media (max-width: 600px) {
    .icon-box {
        flex: 1 1 100%!important;
    }

}

/* Responsive Adjustments CTA */
@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
    }

    .cta-text, .cta-button {
        flex: 0 0 100%;
        margin-bottom: 20px;
    }

    .cta-button {
        text-align: center;
    }
}

/* Responsive Adjustments Section 8 */
@media (max-width: 768px) {
  .two-column-grid {
    flex-direction: column;
  }

  .two-column-grid .column {
    flex: 1 1 100%!important;
  }
}